/* =====================================================================
   NOXTAK Platform — front-end styles
   Brand system per project knowledge §7 (Manual §6).
   ===================================================================== */

:root {
	--nox-navy:   #0A1F3C;
	--nox-blue:   #1554A0;
	--nox-bright: #29ABE2;
	--nox-pale:   #E8F2FB;
	--nox-ink:    #0F2233;
	--nox-muted:  #5B7286;
	--nox-line:   #E1E8EF;
	--nox-white:  #FFFFFF;

	--nox-font-head: "Montserrat", "Segoe UI", sans-serif;
	--nox-font-body: "Open Sans", "Segoe UI", sans-serif;

	--nox-radius: 10px;
	--nox-shadow: 0 10px 30px rgba(10, 31, 60, 0.25);

	/* --- Visual refresh (v0.32.0) --------------------------------------- */

	/* Cool-grey app shell + surfaces */
	--nox-surface:     #F4F7FB;
	--nox-surface-2:   #EDF2F8;
	--nox-card:        #FFFFFF;

	/* Radii scale */
	--nox-r-sm:  8px;
	--nox-r-md:  12px;
	--nox-r-lg:  16px;
	--nox-r-pill: 999px;

	/* Elevation scale — soft, layered, low-contrast (Mapal-calm) */
	--nox-e1: 0 1px 2px rgba(10,31,60,0.05), 0 1px 3px rgba(10,31,60,0.04);
	--nox-e2: 0 2px 6px rgba(10,31,60,0.06), 0 8px 20px rgba(10,31,60,0.05);
	--nox-e3: 0 6px 16px rgba(10,31,60,0.08), 0 18px 40px rgba(10,31,60,0.08);

	/* Signature gradients */
	--nox-grad-blue:   linear-gradient(135deg, var(--nox-blue) 0%, var(--nox-bright) 100%);
	--nox-grad-navy:   linear-gradient(160deg, #0C264A 0%, #0A1F3C 60%, #081A33 100%);
	--nox-aurora:      linear-gradient(90deg, var(--nox-blue) 0%, var(--nox-bright) 45%, #12B3A6 100%);

	/* Per-module accent hues — used for icons + small accents only */
	--mod-dashboard:  #1554A0;
	--mod-manager:    #4C5BD4;
	--mod-tasks:      #0E8FB8;
	--mod-projects:   #2E6EA6;
	--mod-inventory:  #0F9488;
	--mod-profiles:   #7A5AF0;
	--mod-quality:    #C77A00;
	--mod-attendance: #1E9E5A;
	--mod-sales:      #E0623E;
	--mod-forms:      #8A4FD0;
	--mod-kb:         #2A9BD8;
	/* Traceability: slate — a record you consult, never a place you work. */
	--mod-trace: #5B7286;
	--mod-feed:       #5B7286;
	/* Marketing: magenta — the only warm accent in the rail, because the
	   content plan is the one module that is about what goes outward. */
	--mod-marketing:  #B93B8F;

	/* Default accent for a nav item (overridden per module below) */
	--mod: var(--nox-blue);
}

/* Per-module accent binding for nav items + any .nox-mod-* container */
.nox-mod-dashboard  { --mod: var(--mod-dashboard); }
.nox-mod-manager    { --mod: var(--mod-manager); }
.nox-mod-tasks      { --mod: var(--mod-tasks); }
.nox-mod-projects   { --mod: var(--mod-projects); }
.nox-mod-inventory  { --mod: var(--mod-inventory); }
.nox-mod-marketing  { --mod: var(--mod-marketing); }
.nox-mod-profiles   { --mod: var(--mod-profiles); }
.nox-mod-quality    { --mod: var(--mod-quality); }
.nox-mod-attendance { --mod: var(--mod-attendance); }
.nox-mod-sales      { --mod: var(--mod-sales); }
.nox-mod-forms      { --mod: var(--mod-forms); }
.nox-mod-kb         { --mod: var(--mod-kb); }
.nox-mod-traceability { --mod: var(--mod-trace); }
.nox-mod-feed       { --mod: var(--mod-feed); }

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--nox-font-body);
	color: var(--nox-ink);
	font-size: 15px;
	line-height: 1.55;
}

h1, h2, h3 { font-family: var(--nox-font-head); }

a { color: var(--nox-blue-ink); }
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--nox-bright);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Login (and no-access) — full navy field
   ------------------------------------------------------------------ */

.nox-login-body {
	min-height: 100vh;
	background: var(--nox-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.nox-wave {
	position: absolute;
	inset: auto 0 8vh 0;
	width: 100%;
	height: 28vh;
	color: var(--nox-bright);
	opacity: 0.14;
	pointer-events: none;
}

.nox-login-wrap {
	position: relative;
	width: min(400px, calc(100% - 40px));
	margin: 40px 0;
	text-align: center;
}


.nox-login-card {
	background: var(--nox-white);
	border-radius: var(--nox-radius);
	border-left: 4px solid var(--nox-bright);
	box-shadow: var(--nox-shadow);
	padding: 32px 32px 24px;
	text-align: left;
}

.nox-login-card h1 {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	color: var(--nox-navy-ink);
}

.nox-login-sub {
	margin: 0 0 20px;
	color: var(--nox-muted);
	font-size: 14px;
}

.nox-login-error {
	background: #FBEAEA;
	border-left: 3px solid #C0392B;
	color: #7C2D22;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
	margin: 0 0 16px;
}

.nox-login-card label {
	display: block;
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nox-navy-ink);
	margin: 14px 0 6px;
}

.nox-login-card input[type="text"],
.nox-login-card input[type="password"] {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--nox-line);
	border-radius: 6px;
	font: inherit;
	color: var(--nox-ink);
	background: var(--nox-pale);
}

.nox-login-card input[type="text"]:focus,
.nox-login-card input[type="password"]:focus {
	background: var(--nox-white);
	border-color: var(--nox-bright);
}

.nox-remember {
	display: flex !important;
	align-items: center;
	gap: 8px;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: var(--nox-font-body) !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	color: var(--nox-muted) !important;
	margin: 16px 0 !important;
}

.nox-login-card button {
	width: 100%;
	padding: 12px;
	border: 0;
	border-radius: 6px;
	background: var(--nox-blue);
	color: var(--nox-white);
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.nox-login-card button:hover { background: var(--nox-bright); }

.nox-login-help {
	margin: 16px 0 0;
	font-size: 13px;
	text-align: center;
}

.nox-login-foot {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	margin-top: 20px;
}

/* ---------------------------------------------------------------------
   App shell
   ------------------------------------------------------------------ */

.nox-app-body { background: #F5F8FB; }

.nox-header {
	background: var(--nox-navy);
	color: var(--nox-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	height: 60px;
}



.nox-header-user {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
}

.nox-logout {
	color: var(--nox-bright);
	text-decoration: none;
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 13px;
}
.nox-logout:hover { text-decoration: underline; }

.nox-layout {
	display: grid;
	grid-template-columns: 230px 1fr;
	min-height: calc(100vh - 60px);
}

.nox-nav {
	background: var(--nox-white);
	border-right: 1px solid var(--nox-line);
	padding: 20px 0;
}

.nox-nav ul { list-style: none; margin: 0; padding: 0; }

.nox-nav li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 11px 20px;
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--nox-muted);
	border-left: 3px solid transparent;
}
.nox-nav li.is-soon .nox-nav-label { flex: 1; min-width: 0; }
.nox-nav li.is-soon { flex-wrap: nowrap; }

.nox-nav li.is-active {
	color: var(--nox-blue-ink);
	background: var(--nox-pale);
	border-left-color: var(--nox-bright);
}

.nox-soon {
	font-family: var(--nox-font-body);
	font-weight: 400;
	font-size: 9px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--nox-muted);
	background: #EEF2F6;
	border-radius: 999px;
	padding: 2px 6px;
	white-space: nowrap;
	flex-shrink: 0;
}

.nox-main { padding: clamp(20px, 2.4vw, 40px) clamp(18px, 2.6vw, 52px); min-width: 0; }

.nox-main h1 {
	color: var(--nox-navy-ink);
	font-size: 24px;
	margin: 0 0 20px;
}

.nox-card {
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-left: 4px solid var(--nox-bright);
	border-radius: var(--nox-radius);
	padding: 22px 26px;
}

.nox-card h2 {
	margin: 0 0 8px;
	font-size: 16px;
	color: var(--nox-navy-ink);
}

.nox-card p { margin: 0; color: var(--nox-ink); }

.nox-version {
	color: var(--nox-muted);
	font-size: 12px;
	margin-top: 24px;
}

/* ---------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------ */

@media (max-width: 760px) {
	.nox-layout { grid-template-columns: 1fr; }
	.nox-nav {
		border-right: 0;
		border-bottom: 1px solid var(--nox-line);
		padding: 8px 0;
	}
	.nox-main { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ---------------------------------------------------------------------
   Dashboard (v0.5.0)
   ------------------------------------------------------------------ */

.nox-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}

.nox-stat {
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-radius);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
}

.nox-stat-value {
	font-family: var(--nox-font-head);
	font-weight: 800;
	font-size: 28px;
	color: var(--nox-navy-ink);
	line-height: 1.1;
}

.nox-stat-label {
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 12.5px;
	color: var(--nox-blue-ink);
	margin-top: 6px;
}

.nox-stat-hint {
	font-size: 11.5px;
	color: var(--nox-muted);
}

.nox-charts {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 16px;
	margin-bottom: 20px;
}

.nox-chart-card h2,
.nox-recent h2 {
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--nox-navy-ink);
}

.nox-chart-box {
	position: relative;
	height: 240px;
}

.nox-recent-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nox-recent-list li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 0;
	border-top: 1px solid var(--nox-line);
	font-size: 13.5px;
}

.nox-recent-list li:first-child { border-top: 0; }

.nox-recent-who {
	font-family: var(--nox-font-head);
	font-weight: 600;
	color: var(--nox-navy-ink);
}

.nox-recent-what { color: var(--nox-ink); }

.nox-recent-when {
	margin-left: auto;
	color: var(--nox-muted);
	font-size: 12px;
	white-space: nowrap;
}

.nox-empty { color: var(--nox-muted); margin: 0; }

@media (max-width: 980px) {
	.nox-stats { grid-template-columns: repeat(2, 1fr); }
	.nox-charts { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Tasks module + notifications (v0.6.0)
   ------------------------------------------------------------------ */

.nox-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.nox-page-head h1 { margin: 0; }

.nox-btn {
	display: inline-block;
	background: var(--nox-blue);
	color: var(--nox-white);
	border: 0;
	border-radius: 6px;
	padding: 10px 18px;
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}
.nox-btn:hover { background: var(--nox-bright); color: var(--nox-white); }

.nox-btn-small {
	background: var(--nox-blue);
	color: var(--nox-white);
	border: 0;
	border-radius: 6px;
	padding: 7px 13px;
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 12.5px;
	cursor: pointer;
}
.nox-btn-small:hover { background: var(--nox-bright); }
.nox-btn-stop { background: #B03A2E; }
.nox-btn-stop:hover { background: #C0392B; }
.nox-timer-since { font-weight: 400; opacity: 0.85; }

.nox-btn-quiet {
	color: var(--nox-muted);
	text-decoration: none;
	font-size: 14px;
	padding: 10px 6px;
}
.nox-btn-quiet:hover { color: var(--nox-blue-ink); }

/* Bell */
.nox-bell {
	position: relative;
	color: var(--nox-white);
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.nox-bell:hover { color: var(--nox-bright); }
.nox-bell-count {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--nox-bright);
	color: var(--nox-navy-ink);
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	border-radius: 999px;
	padding: 3px 5px;
}

/* Nav links */
.nox-nav a.nox-nav-label {
	color: inherit;
	text-decoration: none;
	display: block;
	flex: 1;
}
.nox-nav li.is-ready:hover { color: var(--nox-blue-ink); }

/* Table */
.nox-table-card { padding: 8px 0; }
.nox-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nox-table th {
	text-align: left;
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--nox-muted);
	padding: 10px 16px;
	border-bottom: 1px solid var(--nox-line);
}
.nox-table td { padding: 12px 16px; border-bottom: 1px solid var(--nox-line); }
.nox-table tr:last-child td { border-bottom: 0; }
.nox-task-link {
	font-family: var(--nox-font-head);
	font-weight: 600;
	color: var(--nox-navy-ink);
	text-decoration: none;
}
.nox-task-link:hover { color: var(--nox-blue-ink); }

/* Badges */
.nox-badge {
	display: inline-block;
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
}
.nox-status-open        { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-status-in_progress { background: #FFF4DE; color: #8A5A00; }
.nox-status-done        { background: #E7F6EC; color: #1E7A3C; }
.nox-status-blocked     { background: #FDE9E7; color: #B03A2E; }
.nox-priority-low       { background: #EEF2F6; color: var(--nox-muted); }
.nox-priority-normal    { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-priority-high      { background: #FBEAEA; color: #B03A2E; }
.nox-overdue            { color: #B03A2E; font-weight: 600; }

/* Notices */
.nox-notice {
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 13.5px;
	margin: 0 0 16px;
}
.nox-notice-ok    { background: #E7F6EC; border-left: 3px solid #1E7A3C; color: #14572A; }
.nox-notice-error { background: #FBEAEA; border-left: 3px solid #C0392B; color: #7C2D22; }

/* Task detail */
.nox-breadcrumb { margin: 0 0 8px; font-size: 13px; }
.nox-breadcrumb a { text-decoration: none; color: var(--nox-muted); }
.nox-breadcrumb a:hover { color: var(--nox-blue-ink); }

.nox-task-meta { margin-bottom: 20px; }
.nox-task-desc { margin: 0 0 16px; }

.nox-meta-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0 0 16px;
}
.nox-meta-grid dt {
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--nox-muted);
}
.nox-meta-grid dd { margin: 2px 0 0; font-size: 14px; }

.nox-task-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid var(--nox-line);
	padding-top: 14px;
}
.nox-inline-form { display: flex; align-items: center; gap: 8px; }
.nox-inline-label {
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 12px;
	color: var(--nox-muted);
}

.nox-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}

/* Forms (shared) */
.nox-form-card label,
.nox-main select,
.nox-main input[type="text"],
.nox-main input[type="date"],
.nox-main input[type="number"],
.nox-main textarea {
	font: inherit;
}
.nox-form-card label {
	display: block;
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nox-navy-ink);
	margin: 14px 0 6px;
}
.nox-form-card input[type="text"],
.nox-form-card input[type="date"],
.nox-form-card select,
.nox-form-card textarea {
	width: 100%;
}
.nox-form-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.nox-form-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
}

/* (field sizing unified in UI v2 layer at end of file — v0.160.0) */

/* Time / file / comment blocks */
.nox-time-form,
.nox-file-form {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.nox-time-form input[type="number"] { width: 90px; }
.nox-time-form input[type="text"] { flex: 1; min-width: 120px; }

.nox-time-list,
.nox-file-list,
.nox-notif-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nox-time-list li,
.nox-file-list li,
.nox-notif-list li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 0;
	border-top: 1px solid var(--nox-line);
	font-size: 13.5px;
}
.nox-time-list li:first-child,
.nox-file-list li:first-child,
.nox-notif-list li:first-child { border-top: 0; }
.nox-running { color: #8A5A00; font-style: normal; font-weight: 600; }

.nox-notif-list a { text-decoration: none; color: var(--nox-ink); }
.nox-notif-list a:hover { color: var(--nox-blue-ink); }
.nox-notif-list li.nox-unread { font-weight: 600; }
.nox-notif-list .nox-recent-when { margin-left: auto; }
.nox-file-list .nox-recent-when { margin-left: auto; }

.nox-comment-list { list-style: none; margin: 0 0 16px; padding: 0; }
.nox-comment-list li { border-top: 1px solid var(--nox-line); padding: 12px 0; }
.nox-comment-list li:first-child { border-top: 0; padding-top: 0; }
.nox-comment-head { display: flex; gap: 10px; margin: 0 0 4px; }
.nox-comment-head .nox-recent-when { margin-left: auto; }
.nox-comment-body { margin: 0; }
.nox-comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--nox-line);
	border-radius: 6px;
	background: var(--nox-pale);
	margin-bottom: 10px;
}
.nox-comment-form textarea:focus { background: var(--nox-white); border-color: var(--nox-bright); }

@media (max-width: 900px) {
	.nox-two-col { grid-template-columns: 1fr; }
	.nox-meta-grid { grid-template-columns: repeat(2, 1fr); }
	.nox-form-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Task people: supervisors & collaborators (v0.7.0)
   ------------------------------------------------------------------ */

.nox-people { margin-bottom: 20px; }

.nox-people-list { list-style: none; margin: 0 0 14px; padding: 0; }
.nox-people-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-top: 1px solid var(--nox-line);
	font-size: 13.5px;
}
.nox-people-list li:first-child { border-top: 0; }

.nox-role-core         { background: #EEF2F6; color: var(--nox-muted); }
.nox-role-supervisor   { background: var(--nox-navy); color: var(--nox-white); }
.nox-role-collaborator { background: var(--nox-pale); color: var(--nox-blue-ink); }

.nox-remove-form { margin-left: auto; }
.nox-remove {
	background: none;
	border: 0;
	color: var(--nox-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 4px;
}
.nox-remove:hover { color: #B03A2E; background: #FBEAEA; }

.nox-people-form {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.nox-people-form select { min-width: 160px; }

/* ---------------------------------------------------------------------
   Inventory module (v0.8.0)
   ------------------------------------------------------------------ */

.nox-inv-storages {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
	align-items: start;
}

.nox-inv-storage {
	text-decoration: none;
	display: block;
	min-height: 118px;
}
.nox-inv-storage h2 { margin: 0 0 12px; font-size: 17px; color: var(--nox-navy-ink); }
.nox-inv-storage:hover { border-color: var(--nox-bright); }

.nox-inv-nums { display: flex; gap: 18px; font-size: 12.5px; color: var(--nox-muted); flex-wrap: wrap; }
.nox-inv-nums span { display: flex; flex-direction: column; }
.nox-inv-nums strong { font-family: var(--nox-font-head); font-size: 22px; color: var(--nox-blue-ink); }

.nox-inv-add-storage { display: flex; flex-direction: column; }
.nox-inv-add-storage label {
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nox-muted);
	margin: 0 0 10px;
}
.nox-inline-pair { display: flex; gap: 8px; align-items: center; }
.nox-inline-pair input[type="text"] { flex: 1; min-width: 0; }

/* Exports: their own quiet row, one line per storage */
.nox-inv-exports-row { margin-bottom: 20px; }
.nox-inv-exports-row h2 { margin: 0 0 12px; font-size: 15px; color: var(--nox-navy-ink); }
.nox-export-line {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 0;
	border-top: 1px solid var(--nox-line);
	flex-wrap: wrap;
}
.nox-export-line:first-of-type { border-top: 0; }
.nox-export-name {
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--nox-navy-ink);
	min-width: 110px;
}
.nox-export-links { display: flex; gap: 16px; flex-wrap: wrap; }
.nox-export-links a {
	font-size: 13px;
	color: var(--nox-blue-ink);
	text-decoration: none;
}
.nox-export-links a:hover { color: var(--nox-bright); text-decoration: underline; }

.nox-inv-break { margin-bottom: 20px; }
.nox-cat-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 13px; }
.nox-cat-name { width: 200px; flex-shrink: 0; font-family: var(--nox-font-head); font-weight: 600; color: var(--nox-navy-ink); }
.nox-cat-bar { flex: 1; height: 8px; border-radius: 999px; background: #EEF2F6; overflow: hidden; display: block; }
.nox-cat-bar span { display: block; height: 100%; border-radius: 999px; }
.nox-cat-count { color: var(--nox-muted); font-size: 12px; white-space: nowrap; }

.nox-inv-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.nox-inv-filter input[type="text"] { flex: 1; min-width: 160px; }

.nox-inv-list { list-style: none; margin: 0; padding: 0; }
.nox-inv-list li { border-top: 1px solid var(--nox-line); }
.nox-inv-list li:first-child { border-top: 0; }
.nox-inv-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; }
.nox-inv-item:hover .nox-inv-item-name { color: var(--nox-blue-ink); }

.nox-inv-thumb {
	width: 52px; height: 52px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	background: #F0F4F8;
	display: block;
}
.nox-inv-thumb-ph { border: 1px dashed var(--nox-line); }

.nox-inv-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nox-inv-item-name { font-family: var(--nox-font-head); font-weight: 600; font-size: 13.5px; color: var(--nox-navy-ink); }
.nox-inv-item-meta { font-size: 11.5px; color: var(--nox-muted); }

.nox-inv-qty {
	font-family: var(--nox-font-head);
	font-weight: 800;
	font-size: 18px;
	color: var(--nox-blue-ink);
	min-width: 40px;
	text-align: center;
}

.nox-shelf-list { list-style: none; margin: 0 0 14px; padding: 0; }
.nox-shelf-list li { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--nox-line); }
.nox-shelf-list li:first-child { border-top: 0; }
.nox-shelf { display: flex; align-items: center; gap: 12px; padding: 11px 0; flex: 1; text-decoration: none; }
.nox-shelf-seq {
	font-family: var(--nox-font-head);
	font-weight: 800;
	font-size: 13px;
	color: var(--nox-white);
	background: var(--nox-navy);
	border-radius: 8px;
	padding: 8px 10px;
}
.nox-shelf-info { display: flex; flex-direction: column; gap: 1px; }
.nox-shelf-label { font-family: var(--nox-font-head); font-weight: 600; font-size: 14px; color: var(--nox-navy-ink); }
.nox-shelf:hover .nox-shelf-label { color: var(--nox-blue-ink); }
.nox-shelf-add { margin-top: 6px; }

.nox-inv-photo {
	max-width: 260px;
	border-radius: 10px;
	display: block;
	margin-bottom: 6px;
	border: 1px solid var(--nox-line);
}

.nox-danger-zone { border-top: 1px solid var(--nox-line); margin-top: 20px; padding-top: 16px; }
.nox-btn-danger {
	background: #FBEAEA;
	color: #B03A2E;
	border: 1px solid #E8C7C2;
	border-radius: 6px;
	padding: 8px 14px;
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 12.5px;
	cursor: pointer;
}
.nox-btn-danger:hover { background: #B03A2E; color: var(--nox-white); }

/* ---------------------------------------------------------------------
   Stock movements (v0.9.0)
   ------------------------------------------------------------------ */

.nox-stock-hero {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 20px;
	border-left-width: 5px;
}

.nox-stock-left { display: flex; gap: 20px; align-items: center; }
.nox-stock-photo {
	width: 110px; height: 110px;
	border-radius: 12px;
	object-fit: cover;
	border: 1px solid var(--nox-line);
}
.nox-stock-now { display: flex; flex-direction: column; }
.nox-stock-num {
	font-family: var(--nox-font-head);
	font-weight: 800;
	font-size: 52px;
	line-height: 1;
	color: var(--nox-navy-ink);
}
.nox-stock-lbl { font-size: 12.5px; color: var(--nox-muted); margin-top: 4px; }

.nox-stock-actions { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 300px; }
.nox-move-form {
	display: grid;
	grid-template-columns: 90px 96px 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 8px 12px;
	border-radius: 8px;
	background: #F5F8FB;
}
.nox-move-in     { background: #E7F6EC; }
.nox-move-out    { background: #FBEAEA; }
.nox-move-adjust { background: var(--nox-pale); }
.nox-move-title {
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 13px;
	color: var(--nox-navy-ink);
	white-space: nowrap;
}
.nox-move-form input[type="number"] { width: 96px; }

.nox-move-list { list-style: none; margin: 0; padding: 0; }
.nox-move-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid var(--nox-line);
	font-size: 13.5px;
}
.nox-move-list li:first-child { border-top: 0; }

.nox-move-badge {
	font-family: var(--nox-font-head);
	font-weight: 800;
	font-size: 13px;
	border-radius: 8px;
	padding: 6px 10px;
	min-width: 44px;
	text-align: center;
	flex-shrink: 0;
}
.nox-move-badge.nox-move-in,
.nox-move-badge.nox-move-initial { background: #E7F6EC; color: #1E7A3C; }
.nox-move-badge.nox-move-out     { background: #FBEAEA; color: #B03A2E; }
.nox-move-badge.nox-move-adjust  { background: var(--nox-pale); color: var(--nox-blue-ink); }

.nox-move-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nox-move-what {
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 13px;
	color: var(--nox-navy-ink);
	text-decoration: none;
}
a.nox-move-what:hover { color: var(--nox-blue-ink); }
.nox-move-after {
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 13px;
	color: var(--nox-muted);
	white-space: nowrap;
}

@media (max-width: 700px) {
	.nox-move-form { grid-template-columns: 1fr 1fr; }
	.nox-move-title { grid-column: 1 / -1; }
	.nox-stock-num { font-size: 42px; }
}

/* ---------------------------------------------------------------------
   Storage delete + Profiles / Team (v0.9.2)
   ------------------------------------------------------------------ */

.nox-danger-link { color: #B03A2E; }
.nox-danger-link:hover { color: #C0392B; text-decoration: underline; }
.nox-delete-warn { font-size: 14px; line-height: 1.55; margin: 0 0 6px; }

/* Profile view */
.nox-profile-head { display: flex; gap: 20px; align-items: center; margin-bottom: 16px; }
.nox-profile-photo {
	width: 96px; height: 96px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--nox-line);
}
.nox-profile-photo-sm { width: 72px; height: 72px; margin-bottom: 10px; }
.nox-profile-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nox-navy);
	color: var(--nox-white);
	font-family: var(--nox-font-head);
	font-weight: 800;
	font-size: 34px;
}
.nox-profile-id h1 { margin: 0 0 2px; font-size: 22px; color: var(--nox-navy-ink); }
.nox-profile-title { margin: 0 0 10px; color: var(--nox-muted); font-size: 14px; }
.nox-profile-bio { margin: 0 0 16px; }

/* Team directory */
.nox-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}
.nox-team-card {
	text-decoration: none;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 20px 14px;
}
.nox-team-card:hover { border-color: var(--nox-bright); }
.nox-team-photo {
	width: 72px; height: 72px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 8px;
	border: 2px solid var(--nox-line);
}
.nox-team-photo.nox-profile-initial { font-size: 26px; }
.nox-team-name { font-family: var(--nox-font-head); font-weight: 600; font-size: 14px; color: var(--nox-navy-ink); }
.nox-team-title { font-size: 12px; color: var(--nox-muted); }

/* ---------------------------------------------------------------------
   Task views: switcher + Kanban board (v0.10.0)
   ------------------------------------------------------------------ */

.nox-head-right { display: flex; align-items: center; gap: 14px; }

.nox-view-switch { display: inline-flex; background: #EEF2F6; border-radius: 8px; padding: 3px; gap: 2px; }
.nox-view-switch form { margin: 0; }
.nox-view-btn {
	border: 0;
	background: transparent;
	color: var(--nox-muted);
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 12.5px;
	padding: 6px 14px;
	border-radius: 6px;
	cursor: pointer;
}
.nox-view-btn.is-active { background: var(--nox-white); color: var(--nox-blue-ink); box-shadow: 0 1px 2px rgba(10,31,60,0.12); }
.nox-view-btn:hover:not(.is-active) { color: var(--nox-navy-ink); }

.nox-board-hint { font-size: 12.5px; color: var(--nox-muted); margin: 0 0 12px; }

.nox-board {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	align-items: start;
}
.nox-board-col {
	background: #F0F4F8;
	border-radius: 10px;
	padding: 10px;
	min-height: 120px;
}
.nox-board-col-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 10px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 6px;
}
.nox-board-count {
	background: rgba(255,255,255,0.6);
	border-radius: 999px;
	padding: 1px 8px;
	font-size: 11px;
}
.nox-board-drop { min-height: 40px; display: flex; flex-direction: column; gap: 8px; }

.nox-board-card {
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: 8px;
	padding: 10px 12px;
	box-shadow: 0 1px 2px rgba(10,31,60,0.06);
}
.nox-board-card.is-draggable { cursor: grab; }
.nox-board-card.is-draggable:active { cursor: grabbing; }
.nox-board-card.is-locked { opacity: 0.75; }
.nox-card-ghost { opacity: 0.4; }

.nox-board-card-title {
	display: block;
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--nox-navy-ink);
	text-decoration: none;
	margin-bottom: 8px;
}
.nox-board-card-title:hover { color: var(--nox-blue-ink); }
.nox-board-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nox-board-assignee { font-size: 11.5px; color: var(--nox-muted); }
.nox-board-card-due { font-size: 11.5px; color: var(--nox-muted); margin-top: 6px; }

/* Board head color accents reuse status colors as text/tint */
.nox-board-col-head.nox-status-open        { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-board-col-head.nox-status-in_progress { background: #FFF4DE; color: #8A5A00; }
.nox-board-col-head.nox-status-done        { background: #E7F6EC; color: #1E7A3C; }
.nox-board-col-head.nox-status-blocked     { background: #FDE9E7; color: #B03A2E; }

@media (max-width: 900px) {
	.nox-board { grid-template-columns: repeat(2, 1fr); }
	.nox-head-right { flex-direction: column; align-items: flex-end; gap: 8px; }
}

/* ---------------------------------------------------------------------
   Dashboard tabs + archived notice (v0.10.1)
   ------------------------------------------------------------------ */

.nox-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid var(--nox-line);
	margin-bottom: 20px;
}
.nox-tab {
	border: 0;
	background: transparent;
	color: var(--nox-muted);
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}
.nox-tab.is-active { color: var(--nox-blue-ink); border-bottom-color: var(--nox-bright); }
.nox-tab:hover:not(.is-active) { color: var(--nox-navy-ink); }

.nox-tabpanel { display: none; }
.nox-tabpanel.is-active { display: block; }

.nox-notice-archived {
	background: #FFF4DE;
	border-left: 3px solid #8A5A00;
	color: #6b4600;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 13.5px;
	margin: 0 0 16px;
}

/* ---------------------------------------------------------------------
   My Board + Calendar + Asana done/archived treatment (v0.11.0)
   ------------------------------------------------------------------ */

/* Asana-style finished (done or archived): greyed, checkmark, struck title */
.nox-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px; height: 15px;
	margin-right: 7px;
	border-radius: 50%;
	background: #1E7A3C;
	color: #fff;
	font-size: 10px;
	line-height: 1;
	vertical-align: middle;
	flex-shrink: 0;
}
.nox-board-card.is-finished { opacity: 0.6; background: #F6F8FA; }
.nox-board-card.is-finished .nox-board-card-title { color: var(--nox-muted); text-decoration: line-through; }
.nox-table tr.is-finished .nox-task-link { color: var(--nox-muted); text-decoration: line-through; }
.nox-table tr.is-finished { opacity: 0.7; }
.nox-cal-task.is-finished { opacity: 0.6; text-decoration: line-through; }

/* My Board column controls */
.nox-mycol-head { position: relative; }
.nox-mycol-label { flex: 1; cursor: default; }
.nox-mycol-label[data-editable] { cursor: text; }
.nox-mycol-del {
	border: 0; background: transparent; color: var(--nox-muted);
	font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; margin-left: 4px;
}
.nox-mycol-del:hover { color: #B03A2E; }
.nox-myboard .nox-board-col-head { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-addcol { background: transparent; }
.nox-addcol-btn {
	width: 100%;
	border: 2px dashed var(--nox-line);
	background: transparent;
	color: var(--nox-muted);
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 13px;
	padding: 12px;
	border-radius: 10px;
	cursor: pointer;
}
.nox-addcol-btn:hover { border-color: var(--nox-bright); color: var(--nox-blue-ink); }

/* Calendar */
.nox-cal-title { margin: 0 0 14px; font-size: 18px; color: var(--nox-navy-ink); }
.nox-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.nox-cal-dow {
	text-align: center;
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nox-muted);
	padding-bottom: 4px;
}
.nox-cal-cell {
	min-height: 92px;
	border: 1px solid var(--nox-line);
	border-radius: 8px;
	padding: 6px;
	background: var(--nox-white);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.nox-cal-cell.is-empty { background: transparent; border: 0; }
.nox-cal-cell.is-today { border-color: var(--nox-bright); box-shadow: inset 0 0 0 1px var(--nox-bright); }
.nox-cal-daynum { font-size: 12px; font-weight: 600; color: var(--nox-muted); }
.nox-cal-cell.is-today .nox-cal-daynum { color: var(--nox-blue-ink); }
.nox-cal-task {
	display: block;
	font-size: 11.5px;
	line-height: 1.25;
	padding: 3px 6px;
	border-radius: 5px;
	text-decoration: none;
	color: var(--nox-navy-ink);
	background: var(--nox-pale);
	border-left: 3px solid var(--nox-blue);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nox-cal-task.nox-status-in_progress { background: #FFF4DE; border-left-color: #8A5A00; }
.nox-cal-task.nox-status-blocked     { background: #FDE9E7; border-left-color: #B03A2E; }
.nox-cal-task.nox-status-done        { background: #E7F6EC; border-left-color: #1E7A3C; }
.nox-cal-undated { display: flex; flex-wrap: wrap; gap: 6px; }
.nox-cal-undated .nox-cal-task { white-space: normal; max-width: 220px; }

@media (max-width: 900px) {
	.nox-cal-grid { gap: 3px; }
	.nox-cal-cell { min-height: 64px; }
	.nox-cal-task { font-size: 10px; }
}

/* ---------------------------------------------------------------------
   Quality control module (v0.12.0)
   ------------------------------------------------------------------ */

.nox-section-h { font-size: 15px; color: var(--nox-navy-ink); margin: 24px 0 12px; font-family: var(--nox-font-head); }
.nox-field-hint { font-size: 12.5px; color: var(--nox-muted); margin: 4px 0 12px; }

.nox-qc-product-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; padding: 18px; }
.nox-qc-product-card:hover { border-color: var(--nox-bright); }
.nox-qc-product-name { font-family: var(--nox-font-head); font-weight: 600; font-size: 15px; color: var(--nox-navy-ink); }

/* Batch status badges */
.nox-qc-status-open       { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-qc-status-inspecting { background: #FFF4DE; color: #8A5A00; }
.nox-qc-status-closed     { background: #E7F6EC; color: #1E7A3C; }

/* Severity badges */
.nox-sev-critical { background: #FDE9E7; color: #B03A2E; }
.nox-sev-major    { background: #FFF4DE; color: #8A5A00; }
.nox-sev-minor    { background: #EEF2F6; color: var(--nox-muted); }

/* Inspection cards */
.nox-qc-insp { margin-bottom: 14px; }
.nox-qc-insp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.nox-qc-insp-head .nox-inv-item-meta { display: block; margin-top: 2px; }
.nox-qc-insp-nums { font-size: 13px; color: var(--nox-navy-ink); font-weight: 600; }

.nox-qc-defect-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nox-qc-defect-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--nox-line); }
.nox-qc-defect-label { font-weight: 600; font-size: 13.5px; color: var(--nox-navy-ink); }
.nox-qc-defect-note { font-size: 12.5px; color: var(--nox-muted); }
.nox-qc-defect-photo img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--nox-line); }
.nox-qc-insp-notes { margin: 10px 0 0; font-size: 13px; color: var(--nox-ink); }

/* Inspection capture: defect rows */
.nox-qc-defect-row {
	border: 1px solid var(--nox-line);
	border-left: 3px solid var(--nox-bright);
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 12px;
	background: #FBFDFF;
}
.nox-qc-remove-defect { margin-top: 8px; color: #B03A2E; }
/* The label for a checkbox with text beside it. Distinct from .nox-check,
   which is the small green status badge — two views had used the badge as a
   label and squashed their text inside a 15px circle. */
.nox-check-inline { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 10px 0; }
.nox-check-inline input { width: auto; margin: 0; }

/* ---------------------------------------------------------------------
   Dashboard framework: time range + KPI strip + section links (v0.13.0)
   ------------------------------------------------------------------ */

.nox-dash-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.nox-dash-head h1 { margin: 0; }

.nox-range-switch { display: inline-flex; background: #EEF2F6; border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.nox-range-switch form { margin: 0; }
.nox-range-btn {
	border: 0;
	background: transparent;
	color: var(--nox-muted);
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}
.nox-range-btn.is-active { background: var(--nox-white); color: var(--nox-blue-ink); box-shadow: 0 1px 2px rgba(10,31,60,0.12); }
.nox-range-btn:hover:not(.is-active) { color: var(--nox-navy-ink); }

/* KPI strip */
.nox-kpi-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin-bottom: 22px;
}
.nox-kpi {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px;
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-left: 3px solid var(--nox-bright);
	border-radius: 10px;
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s;
}
.nox-kpi:hover { border-color: var(--nox-bright); transform: translateY(-1px); }
.nox-kpi.is-alert { border-left-color: #B03A2E; }
.nox-kpi-value { font-family: var(--nox-font-head); font-weight: 800; font-size: 26px; color: var(--nox-navy-ink); line-height: 1.1; }
.nox-kpi.is-alert .nox-kpi-value { color: #B03A2E; }
.nox-kpi-label { font-size: 12.5px; color: var(--nox-muted); }
/* Second line under a KPI label, for a figure that needs a qualifier. */
.nox-kpi-sub { display: block; font-size: 11.5px; color: var(--nox-muted); margin-top: 2px; }
.nox-kpi-go { position: absolute; top: 14px; right: 14px; color: var(--nox-line); font-size: 15px; transition: color 0.15s; }
.nox-kpi:hover .nox-kpi-go { color: var(--nox-bright); }

.nox-panel-link { margin: 0 0 14px; }
.nox-panel-link a { font-size: 12.5px; font-weight: 600; color: var(--nox-blue-ink); text-decoration: none; }
.nox-panel-link a:hover { text-decoration: underline; }

@media (max-width: 1000px) {
	.nox-kpi-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.nox-kpi-strip { grid-template-columns: repeat(2, 1fr); }
	.nox-kpi-value { font-size: 22px; }
}

/* ---------------------------------------------------------------------
   Knowledge base
   ------------------------------------------------------------------ */

.nox-kb-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.nox-kb-head h1 { margin: 0 0 4px; }
.nox-kb-lede { margin: 0; color: var(--nox-muted); max-width: 60ch; }
.nox-kb-audience { margin: 8px 0 0; color: var(--nox-muted); font-size: 14px; }

.nox-lang-switch {
	display: inline-flex;
	border: 1px solid var(--nox-line);
	border-radius: 999px;
	overflow: hidden;
	background: var(--nox-white);
	flex: none;
}
.nox-lang-btn {
	padding: 6px 14px;
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.03em;
	color: var(--nox-muted);
	text-decoration: none;
}
.nox-lang-btn.is-active { background: var(--nox-blue); color: var(--nox-white); }

.nox-kb-group { margin-top: 28px; }
.nox-kb-group-head h2 { margin: 0 0 2px; }
.nox-kb-group-blurb { margin: 0 0 14px; color: var(--nox-muted); max-width: 66ch; }

.nox-kb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}
.nox-kb-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-left: 4px solid var(--nox-bright);
	border-radius: var(--nox-radius);
	text-decoration: none;
	color: var(--nox-ink);
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.nox-kb-card:hover {
	box-shadow: 0 8px 24px rgba(10, 31, 60, 0.10);
	transform: translateY(-1px);
	border-left-color: var(--nox-blue);
}
.nox-kb-card-icon {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--nox-pale);
	color: var(--nox-blue-ink);
}
.nox-kb-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nox-kb-card-title { font-family: var(--nox-font-head); font-weight: 700; font-size: 16px; }
.nox-kb-card-summary { color: var(--nox-muted); font-size: 14px; line-height: 1.45; }
.nox-kb-card-audience {
	margin-top: 4px;
	font-size: 12px;
	color: var(--nox-blue-ink);
	background: var(--nox-pale);
	padding: 2px 8px;
	border-radius: 999px;
	align-self: flex-start;
}
.nox-kb-card-go { margin-left: auto; color: var(--nox-muted); font-size: 18px; align-self: center; }
.nox-kb-soon { border-style: dashed; }

/* Single guide */
.nox-kb-openlink { margin: 14px 0 0; }
.nox-kb-body { display: flex; gap: 28px; align-items: flex-start; margin-top: 20px; }
.nox-kb-toc {
	flex: none;
	width: 220px;
	position: sticky;
	top: 20px;
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-radius);
	padding: 14px 16px;
	background: var(--nox-white);
}
.nox-kb-toc-title {
	display: block;
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--nox-muted);
	margin-bottom: 8px;
}
.nox-kb-toc ul { list-style: none; margin: 0; padding: 0; }
.nox-kb-toc li { margin: 6px 0; }
.nox-kb-toc a { text-decoration: none; font-size: 14px; color: var(--nox-blue-ink); }
.nox-kb-toc a:hover { text-decoration: underline; }

.nox-kb-article { flex: 1 1 auto; min-width: 0; max-width: 72ch; }
.nox-kb-section { scroll-margin-top: 20px; }
.nox-kb-section + .nox-kb-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--nox-line); }
.nox-kb-section h2 { margin: 0 0 10px; font-size: 20px; color: var(--nox-navy-ink); }
.nox-kb-article p { margin: 0 0 12px; }
.nox-kb-article ul, .nox-kb-article ol { margin: 0 0 12px; padding-left: 20px; }
.nox-kb-article li { margin: 5px 0; }
.nox-kb-article strong { color: var(--nox-ink); }

/* Prev / next */
.nox-kb-pager { display: flex; justify-content: space-between; gap: 14px; margin-top: 32px; }
.nox-kb-pager a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-radius);
	text-decoration: none;
	background: var(--nox-white);
	max-width: 48%;
}
.nox-kb-pager a:hover { border-color: var(--nox-blue); }
.nox-kb-pager-next { text-align: right; margin-left: auto; }
.nox-kb-pager-dir { font-size: 12px; color: var(--nox-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.nox-kb-pager-name { font-family: var(--nox-font-head); font-weight: 600; color: var(--nox-blue-ink); }

@media (max-width: 720px) {
	.nox-kb-body { flex-direction: column; }
	.nox-kb-toc { position: static; width: 100%; }
	.nox-kb-pager a { max-width: 100%; }
}

/* ---------------------------------------------------------------------
   Language switch — placement in header and on the login card
   ------------------------------------------------------------------ */

.nox-lang-switch-header {
	height: 30px;
	align-items: stretch;
}
.nox-lang-switch-header .nox-lang-btn {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	font-size: 12px;
}
/* On the navy header the resting buttons read as light text; active stays blue. */
.nox-header .nox-lang-switch-header {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.25);
}
.nox-header .nox-lang-switch-header .nox-lang-btn { color: rgba(255, 255, 255, 0.85); }
.nox-header .nox-lang-switch-header .nox-lang-btn.is-active { background: var(--nox-bright); color: var(--nox-navy-ink); }

.nox-lang-switch-login {
	position: absolute;
	top: 16px;
	right: 16px;
	height: 28px;
}
.nox-lang-switch-login .nox-lang-btn { display: inline-flex; align-items: center; padding: 0 11px; font-size: 12px; }
.nox-login-card { position: relative; }

/* ---------------------------------------------------------------------
   KB accordions — collapsible guide sections and index groups
   ------------------------------------------------------------------ */

/* Expand / collapse all */
.nox-kb-acc-tools { margin: 0 0 14px; font-size: 13px; color: var(--nox-muted); }
.nox-kb-acc-all { background: none; border: 0; padding: 0; cursor: pointer; color: var(--nox-blue-ink); font: inherit; }
.nox-kb-acc-all:hover { text-decoration: underline; }
.nox-kb-acc-sep { margin: 0 8px; color: var(--nox-line); }

/* Guide sections as accordions */
.nox-kb-section {
	padding: 0;
	margin: 0 0 12px;
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-radius);
	background: var(--nox-white);
	overflow: hidden;
	scroll-margin-top: 20px;
}
.nox-kb-section + .nox-kb-section { margin-top: 12px; padding-top: 0; border-top: 1px solid var(--nox-line); }
.nox-kb-section > summary.nox-kb-section-head {
	list-style: none;
	cursor: pointer;
	padding: 15px 18px;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--nox-navy-ink);
	display: flex;
	align-items: center;
	gap: 11px;
	user-select: none;
}
.nox-kb-section > summary.nox-kb-section-head::-webkit-details-marker { display: none; }
.nox-kb-section > summary.nox-kb-section-head::before {
	content: '';
	flex: 0 0 auto;
	width: 8px; height: 8px;
	border-right: 2px solid var(--nox-bright);
	border-bottom: 2px solid var(--nox-bright);
	transform: rotate(-45deg);
	transition: transform .18s ease;
}
.nox-kb-section[open] > summary.nox-kb-section-head::before { transform: rotate(45deg); }
.nox-kb-section > summary.nox-kb-section-head:hover { background: var(--nox-pale); }
.nox-kb-section-body { padding: 2px 18px 18px; }
.nox-kb-section-body > :first-child { margin-top: 4px; }

/* Index groups as accordions */
.nox-kb-group {
	margin: 0 0 18px;
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-radius);
	background: var(--nox-white);
}
.nox-kb-group > summary.nox-kb-group-head {
	list-style: none;
	cursor: pointer;
	padding: 16px 44px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: relative;
	user-select: none;
}
.nox-kb-group > summary.nox-kb-group-head::-webkit-details-marker { display: none; }
.nox-kb-group > summary.nox-kb-group-head::after {
	content: '';
	position: absolute; right: 18px; top: 21px;
	width: 9px; height: 9px;
	border-right: 2px solid var(--nox-muted);
	border-bottom: 2px solid var(--nox-muted);
	transform: rotate(-45deg);
	transition: transform .18s ease;
}
.nox-kb-group[open] > summary.nox-kb-group-head::after { transform: rotate(45deg); }
.nox-kb-group > summary.nox-kb-group-head:hover { background: var(--nox-pale); border-radius: var(--nox-radius) var(--nox-radius) 0 0; }
.nox-kb-group-title { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: 17px; color: var(--nox-navy-ink); margin: 0; }
.nox-kb-group-blurb { margin: 0; color: var(--nox-muted); font-size: 14px; max-width: 66ch; }
.nox-kb-group .nox-kb-grid { padding: 0 16px 16px; }
.nox-kb-group .nox-kb-soon { margin: 0 16px 16px; }

/* ---------------------------------------------------------------------
   KB document tables — real table styling (borders, padding, header)
   ------------------------------------------------------------------ */

.nox-kb-section-body table,
table.nox-kb-table {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0;
	font-size: 14px;
	line-height: 1.5;
}
.nox-kb-section-body th,
.nox-kb-section-body td {
	text-align: left;
	vertical-align: top;
	padding: 9px 12px;
	border: 1px solid var(--nox-line);
}
.nox-kb-section-body thead th {
	background: var(--nox-pale);
	color: var(--nox-navy-ink);
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
}
.nox-kb-section-body tbody tr:nth-child(even) { background: rgba(232, 242, 251, 0.35); }
.nox-kb-section-body td strong { color: var(--nox-ink); }
.nox-kb-section-body table :is(p, ul) { margin: 0; }

/* Narrow screens: let a wide table scroll instead of squashing */
@media (max-width: 640px) {
	.nox-kb-section-body thead th { white-space: normal; }
}

/* ---------------------------------------------------------------------
   Forms module (PTO requests, review queue)
   ------------------------------------------------------------------ */

.nox-muted { color: var(--nox-muted); }

.nox-btn-ghost {
	display: inline-block;
	padding: 9px 16px;
	border-radius: var(--nox-radius);
	border: 1px solid var(--nox-line);
	color: var(--nox-muted);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
.nox-btn-ghost:hover { background: var(--nox-pale); color: var(--nox-navy-ink); }

/* Status pills */
.nox-form-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.nox-form-status.is-submitted { background: #FFF4D6; color: #8A6100; }
.nox-form-status.is-approved  { background: #DCF5E6; color: #146C3A; }
.nox-form-status.is-denied    { background: #FBE0E0; color: #9B1C1C; }
.nox-form-status.is-cancelled { background: var(--nox-line); color: var(--nox-muted); }
.nox-form-status.is-countersigned,
.nox-form-status.is-signed    { background: #DCF5E6; color: #146C3A; }
.nox-form-status.is-reopened  { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-forms-cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.nox-count-badge {
	display: inline-block;
	min-width: 18px;
	padding: 0 6px;
	margin-left: 8px;
	border-radius: 999px;
	background: var(--nox-bright);
	color: var(--nox-navy-ink);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

/* Index lists */
.nox-forms-review-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nox-forms-review-cta h2 { margin: 0 0 2px; }
.nox-forms-soon { margin: 12px 0 0; font-size: 13px; }
.nox-forms-list, .nox-forms-mine { list-style: none; margin: 10px 0 0; padding: 0; }
.nox-forms-list li, .nox-forms-mine li {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 12px 0; border-top: 1px solid var(--nox-line);
}
.nox-forms-list li:first-child, .nox-forms-mine li:first-child { border-top: 0; }
.nox-forms-list li > div { display: flex; flex-direction: column; gap: 2px; }
.nox-forms-mine li a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.nox-forms-ref { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; color: var(--nox-navy-ink); letter-spacing: .02em; }

/* Read-back definition list */
.nox-readback { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 8px 18px; margin: 0; }
.nox-readback dt { color: var(--nox-muted); font-size: 13px; }
.nox-readback dd { margin: 0; color: var(--nox-ink); }

.nox-form-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.nox-form-head h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.nox-decision-card { border-left: 4px solid var(--nox-line); }
.nox-decision-card.is-approved { border-left-color: #2FA968; }
.nox-decision-card.is-denied   { border-left-color: #D64545; }
.nox-decision-card h2 { margin-top: 0; }

/* Form building blocks */
.nox-form-h { font-family: 'Montserrat', system-ui, sans-serif; color: var(--nox-navy-ink); font-size: 15px; margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--nox-line); }
.nox-form-h:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.nox-form-fieldset { border: 0; padding: 0; margin: 12px 0; }
.nox-form-fieldset legend { padding: 0; font-weight: 600; color: var(--nox-ink); font-size: 14px; margin-bottom: 6px; }
.nox-radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-size: 14px; }
.nox-form-hint { margin: 6px 0 0; font-size: 13px; color: var(--nox-muted); }

/* Filter tabs + review table */
.nox-filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.nox-filter-tabs a {
	padding: 6px 14px; border-radius: 999px; border: 1px solid var(--nox-line);
	text-decoration: none; color: var(--nox-muted); font-size: 13px; font-weight: 600;
}
.nox-filter-tabs a:hover { background: var(--nox-pale); color: var(--nox-navy-ink); }
.nox-filter-tabs a.is-active { background: var(--nox-navy); color: var(--nox-white); border-color: var(--nox-navy); }
.nox-review-table td a { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; }

/* Agreement forms — clause lists + consent checkboxes */
.nox-agree-list { margin: 4px 0 8px; padding-left: 20px; color: var(--nox-ink); }
.nox-agree-list li { margin: 4px 0; font-size: 14px; line-height: 1.5; }
.nox-checkline { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0; font-size: 14px; line-height: 1.5; }
.nox-checkline input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.nox-checkline-strong { font-weight: 600; color: var(--nox-ink); background: var(--nox-pale); padding: 12px 14px; border-radius: var(--nox-radius); margin: 12px 0; }

/* ---------------------------------------------------------------------------
   Time & Attendance module (v0.21.0)
   ------------------------------------------------------------------------ */

.nox-att-punch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-left: 4px solid var(--nox-line);
}
.nox-att-punch.nox-att-working { border-left-color: #1E7A3C; }
.nox-att-punch.nox-att-break   { border-left-color: #8A5A00; }
.nox-att-punch.nox-att-off     { border-left-color: var(--nox-muted); }
/* A day somebody forgot to close. Red, because it is not a shift in progress
   and it blocks the next clock-in until it is answered. */
.nox-att-punch.nox-att-stale   { border-left-color: #B03A2E; }

.nox-att-status { display: flex; align-items: center; gap: 12px; }
.nox-att-status strong { display: block; color: var(--nox-navy-ink); font-size: 17px; }
.nox-att-status .nox-muted { display: block; font-size: 13px; }

.nox-att-dot {
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--nox-muted); flex: none;
}
.nox-att-working .nox-att-dot { background: #1E7A3C; box-shadow: 0 0 0 4px rgba(30,122,60,.15); }
.nox-att-break   .nox-att-dot { background: #C77A00; box-shadow: 0 0 0 4px rgba(199,122,0,.15); }
.nox-att-off     .nox-att-dot { background: var(--nox-muted); }
.nox-att-stale   .nox-att-dot { background: #B03A2E; box-shadow: 0 0 0 4px rgba(176,58,46,.15); }

/* The correction form for a forgotten punch-out. */
.nox-att-resolve { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nox-att-resolve label { margin: 0; font-weight: 600; font-size: 13.5px; }
.nox-att-resolve input[type="datetime-local"] { margin: 0; width: auto; }
.nox-att-resolve-hint { margin: 8px 0 0; max-width: 60ch; }
/* The one live figure on the card — it should read as a number that is
   moving, not as prose that happens to change. */
.nox-att-live { font-variant-numeric: tabular-nums; font-weight: 600; }

.nox-att-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.nox-att-actions form { margin: 0; }
.nox-btn.nox-att-out { background: #B03A2E; }
.nox-btn.nox-att-out:hover { background: #922f25; }

.nox-att-breaks { list-style: none; margin: 0; padding: 0; }
.nox-att-breaks li {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 8px 0; border-bottom: 1px solid var(--nox-line);
}
.nox-att-breaks li:last-child { border-bottom: 0; }

.nox-att-week-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.nox-att-week-head h2 { margin: 0; }
.nox-att-week-nav { display: flex; align-items: center; gap: 10px; }

.nox-att-table { width: 100%; border-collapse: collapse; }
.nox-att-table th[scope="row"] {
	text-align: left; font-weight: 600; color: var(--nox-ink);
	white-space: nowrap; padding: 8px 12px 8px 0; width: 1%;
}
.nox-att-table tr.is-today th[scope="row"] { color: var(--nox-blue-ink); }
.nox-att-bar-cell { width: 100%; padding: 8px 12px; }
.nox-att-bar {
	display: block; height: 10px; border-radius: 6px;
	background: linear-gradient(90deg, var(--nox-blue), var(--nox-bright));
	min-width: 2px;
}
.nox-att-table tr.is-today .nox-att-bar { box-shadow: 0 0 0 2px var(--nox-pale); }
.nox-att-hours { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--nox-navy-ink); }
.nox-att-table tfoot th, .nox-att-table tfoot td { border-top: 2px solid var(--nox-line); padding-top: 10px; }
.nox-att-total { font-weight: 700; font-size: 15px; }

.nox-att-now { list-style: none; margin: 0; padding: 0; }
.nox-att-now li {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 8px 0; border-bottom: 1px solid var(--nox-line);
}
.nox-att-now li:last-child { border-bottom: 0; }
.nox-att-now li .nox-att-now-since { margin-left: auto; font-size: 13px; }
.nox-att-now li .nox-w-state-ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.nox-att-now li.nox-w-state-working .nox-w-state-ic { color: #1E9E5A; background: rgba(30, 158, 90, .12); }
.nox-att-now li.nox-w-state-break .nox-w-state-ic { color: #C08A00; background: rgba(192, 138, 0, .14); }
.nox-att-now li.nox-w-state-stale .nox-w-state-ic { color: #B03A2E; background: rgba(176, 58, 46, .14); }
body[data-nox-theme="dark"] .nox-att-now li.nox-w-state-working .nox-w-state-ic { color: #43C77E; background: rgba(67, 199, 126, .16); }
body[data-nox-theme="dark"] .nox-att-now li.nox-w-state-break .nox-w-state-ic { color: #E0A72A; background: rgba(224, 167, 42, .18); }
body[data-nox-theme="dark"] .nox-att-now li.nox-w-state-stale .nox-w-state-ic { color: #E59B94; background: rgba(229, 155, 148, .18); }
/* The stale punch card's dot and rule are literal reds; lighten them the way
   the generated skin lightens every other dark-on-dark ink. */
body[data-nox-theme="dark"] .nox-att-punch.nox-att-stale { border-left-color: #E59B94; }
body[data-nox-theme="dark"] .nox-att-stale .nox-att-dot { background: #E59B94; box-shadow: 0 0 0 4px rgba(229,155,148,.15); }
/* The forgotten-timer panel is a literal light red card with dark red ink;
   both need the same lightening the generated skin gives everything else. */
body[data-nox-theme="dark"] .nox-timer-stale { background-color: #3A1E1B; border-color: #6B3630; }
body[data-nox-theme="dark"] .nox-timer-stale-note { color: #E59B94; }
.nox-review-person { display: inline-flex; align-items: center; gap: 4px; }

.nox-badge-ok   { background: #E7F6EC; color: #1E7A3C; }
.nox-badge-warn { background: #FFF4DE; color: #8A5A00; }

/* Calendar chips */
.nox-att-cal-worked {
	margin-top: 4px; font-size: 11px; font-weight: 600;
	color: #1E7A3C; background: #E7F6EC; border-radius: 4px;
	padding: 1px 5px; display: inline-block;
}
.nox-att-cal-off {
	margin-top: 4px; font-size: 11px;
	color: #8A5A00; background: #FFF4DE; border-left: 3px solid #C77A00;
	border-radius: 3px; padding: 1px 5px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nox-att-legend {
	display: flex; gap: 20px; margin-top: 14px;
	font-size: 13px; color: var(--nox-muted);
}
.nox-att-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nox-att-key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.nox-att-key-worked { background: #E7F6EC; box-shadow: inset 0 0 0 1px #1E7A3C; }
.nox-att-key-off { background: #FFF4DE; box-shadow: inset 0 0 0 1px #C77A00; }

@media (max-width: 600px) {
	.nox-att-punch { flex-direction: column; align-items: stretch; }
	.nox-att-actions { justify-content: stretch; }
	.nox-att-actions form, .nox-att-actions .nox-btn, .nox-att-actions .nox-btn-ghost { width: 100%; }
}

/* Today breakdown (gross / break / worked) */
.nox-att-today { display: flex; gap: 12px; flex-wrap: wrap; }
.nox-att-metric {
	flex: 1; min-width: 92px; text-align: center;
	background: var(--nox-pale); border-radius: 10px; padding: 12px 14px;
}
.nox-att-metric-val {
	display: block; font-size: 22px; font-weight: 700;
	color: var(--nox-navy-ink); font-variant-numeric: tabular-nums;
}
.nox-att-metric-lbl { display: block; font-size: 12px; color: var(--nox-muted); margin-top: 2px; }
.nox-att-metric-strong { background: var(--nox-blue); }
.nox-att-metric-strong .nox-att-metric-val,
.nox-att-metric-strong .nox-att-metric-lbl { color: #fff; }

/* Product catalogue */
.nox-sku-table thead th { font-size: 12px; color: var(--nox-muted); font-weight: 600; text-align: left; padding: 4px 12px 4px 0; }
.nox-sku-table thead th.nox-att-hours { text-align: right; }
.nox-sku-inactive { opacity: 0.5; }
.nox-sku-note { display: block; font-size: 11px; margin-top: 2px; }
.nox-export-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Clickable stat cards on the dashboards */
.nox-stat-link { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.nox-stat-link:hover { border-color: var(--nox-bright); background: var(--nox-pale); }

/* Low-stock / reorder alert card on the dashboards */
.nox-alert-card { border-color: #E7C98A; background: #FEF7EC; }
.nox-alert-card h2 { color: #8A5A00; }

/* =====================================================================
   VISUAL REFRESH — v0.32.0
   Appended intentionally last so these rules win by cascade order.
   Calm neutral shell + per-module accent colour, icon nav rail,
   softer elevation, gradient primaries, unicolour SVG icons.
   ===================================================================== */

/* ---- App shell ---------------------------------------------------- */
.nox-app-body { background: var(--nox-surface); }

.nox-header {
	background: var(--nox-grad-navy);
	box-shadow: var(--nox-e2);
	position: relative;
	z-index: 5;
	border-bottom: 0;
}
/* Aurora hairline under the header — the signature flourish */
.nox-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--nox-aurora);
	opacity: 0.92;
}
.nox-brand-link .nox-brand-mark { filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

/* ---- Sidebar: icon rail ------------------------------------------- */
.nox-nav {
	background: var(--nox-card);
	border-right: 1px solid var(--nox-line);
	padding: 16px 0;
}
.nox-nav ul { padding: 0 6px; }

.nox-nav li.nox-nav-item {
	position: relative;
	padding: 1px 6px;
	border-left: 0;
	background: transparent;
	margin: 1px 0;
}

/* Active accent bar */
.nox-nav li.nox-nav-item.is-active::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 3px; height: 22px;
	border-radius: 0 3px 3px 0;
	background: var(--mod);
}

/* The clickable row (anchor for ready items, span for "soon") */
.nox-nav li .nox-nav-label {
	display: flex;
	align-items: center;
	gap: 11px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--nox-muted);
	text-decoration: none;
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 13.5px;
	transition: background 0.15s ease, color 0.15s ease;
}

/* Icon chip — tinted with the module hue */
.nox-nav-ico {
	flex: 0 0 auto;
	width: 30px; height: 30px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	color: var(--mod);
	background: var(--nox-pale);
	background: color-mix(in srgb, var(--mod) 13%, #ffffff);
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.nox-nav-ico .nox-ico { display: block; }
.nox-nav-txt {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Hover (ready) */
.nox-nav li.nox-nav-item.is-ready:hover .nox-nav-label {
	background: var(--nox-surface-2);
	color: var(--nox-navy-ink);
}
.nox-nav li.nox-nav-item.is-ready:hover .nox-nav-ico {
	background: color-mix(in srgb, var(--mod) 22%, #ffffff);
}

/* Active */
.nox-nav li.nox-nav-item.is-active .nox-nav-label {
	background: var(--nox-pale);
	background: color-mix(in srgb, var(--mod) 11%, #ffffff);
	color: var(--nox-navy-ink);
	font-weight: 700;
}
.nox-nav li.nox-nav-item.is-active .nox-nav-ico {
	background: var(--mod);
	color: #fff;
	box-shadow: 0 4px 10px color-mix(in srgb, var(--mod) 40%, transparent);
}

/* Coming-soon items stay quiet */
.nox-nav li.nox-nav-item.is-soon .nox-nav-ico {
	color: var(--nox-muted);
	background: var(--nox-surface-2);
}
.nox-nav li.nox-nav-item.is-soon .nox-nav-label { color: var(--nox-muted); }

/* ---- Cards -------------------------------------------------------- */
.nox-card {
	border-radius: var(--nox-r-md);
	box-shadow: var(--nox-e1);
}

/* ---- KPI tiles ---------------------------------------------------- */
.nox-kpi {
	border: 1px solid var(--nox-line);
	border-left: 1px solid var(--nox-line);
	border-radius: var(--nox-r-md);
	box-shadow: var(--nox-e1);
	padding: 18px 18px 16px;
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.nox-kpi::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--nox-grad-blue);
}
.nox-kpi.is-alert::before { background: linear-gradient(180deg, #E0623E, #B03A2E); }
.nox-kpi:hover {
	box-shadow: var(--nox-e2);
	transform: translateY(-2px);
	border-color: transparent;
}
.nox-kpi-value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.nox-kpi-go {
	width: 22px; height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--nox-surface-2);
	color: var(--nox-muted);
	font-size: 13px;
	top: 14px; right: 14px;
	transition: background 0.15s ease, color 0.15s ease;
}
.nox-kpi:hover .nox-kpi-go { background: var(--nox-blue); color: #fff; }

/* ---- Stat tiles --------------------------------------------------- */
.nox-stat {
	position: relative;
	border-radius: var(--nox-r-md);
	box-shadow: var(--nox-e1);
	padding: 18px 18px 16px;
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.nox-stat::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--nox-grad-blue);
}
.nox-stat-value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
a.nox-stat.nox-stat-link:hover { transform: translateY(-2px); box-shadow: var(--nox-e2); }

/* ---- Buttons: gradient block removed in v0.160.0 (UI v2 owns buttons,
        flat system at the end of this file) ---------------------------- */

/* ---- Segmented switches (view / range) ---------------------------- */
.nox-view-switch, .nox-range-switch { background: var(--nox-surface-2); }
.nox-view-btn.is-active, .nox-range-btn.is-active { box-shadow: var(--nox-e1); }

/* ---- Tables ------------------------------------------------------- */
.nox-table-card { border-radius: var(--nox-r-md); overflow: hidden; }
.nox-table th { background: var(--nox-surface); }

/* ---- Notifications bell ------------------------------------------- */
.nox-bell-count { box-shadow: 0 0 0 2px var(--nox-navy); }

/* ---- KB / team / QC / inventory cards: consistent soft lift ------- */
.nox-kb-card, .nox-team-card, .nox-qc-product-card, .nox-inv-storage {
	border-radius: var(--nox-r-md);
	box-shadow: var(--nox-e1);
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.nox-kb-card:hover, .nox-team-card:hover, .nox-qc-product-card:hover, .nox-inv-storage:hover {
	box-shadow: var(--nox-e2);
	transform: translateY(-2px);
}

/* ---- Login: deeper field, glass card, aurora edge ----------------- */
.nox-login-body {
	background:
		radial-gradient(1100px 560px at 50% -12%, #12386c 0%, rgba(18,56,108,0) 62%),
		var(--nox-grad-navy);
}
.nox-wave { opacity: 0.22; }
.nox-login-card {
	border-left: 0;
	border-radius: var(--nox-r-lg);
	box-shadow: 0 30px 70px rgba(0,0,0,0.42);
	overflow: hidden;
	padding-top: 30px;
}
.nox-login-card::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: var(--nox-aurora);
}
.nox-login-card button {
	background: var(--nox-grad-blue);
	border-radius: var(--nox-r-sm);
	box-shadow: 0 4px 14px rgba(21,84,160,0.34);
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.nox-login-card button:hover { background: var(--nox-grad-blue); filter: brightness(1.06); }

/* ---- Mobile: keep the icon rail readable when stacked ------------- */
@media (max-width: 760px) {
	.nox-nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		padding: 6px 10px;
	}
	.nox-nav li.nox-nav-item { padding: 0; margin: 0; }
	.nox-nav li.nox-nav-item.is-active::before { display: none; }
	.nox-nav li .nox-nav-label { padding: 7px 10px; }
}

/* ------------------------------------------------------------------ *
 * Subtasks & checklists (v0.34.0)
 * ------------------------------------------------------------------ */
.nox-subhead { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.nox-subhead h2 { margin: 0; }

.nox-prog-pill {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px; height: 20px; padding: 0 8px;
	font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
	color: var(--nox-muted); background: var(--nox-pale);
	border: 1px solid var(--nox-line); border-radius: 999px;
}
.nox-prog-inline { min-width: 30px; height: 18px; padding: 0 6px; font-size: 11px; }

.nox-parent-hint { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--nox-muted); }

/* Subtask rows */
.nox-subtask-list { list-style: none; margin: 0 0 14px; padding: 0; }
.nox-subtask-row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 9px 2px; border-bottom: 1px solid var(--nox-line);
}
.nox-subtask-row:last-child { border-bottom: 0; }
.nox-subtask-title { font-weight: 500; color: var(--nox-ink); text-decoration: none; }
.nox-subtask-title:hover { color: var(--nox-blue-ink); }
.nox-subtask-row.is-finished .nox-subtask-title { color: var(--nox-muted); text-decoration: line-through; }
.nox-subtask-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nox-subtask-who { font-size: 12px; color: var(--nox-muted); }
.nox-subtask-due { font-size: 12px; color: var(--nox-muted); }

.nox-subtask-form, .nox-check-form {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px;
}
.nox-subtask-form input[type="text"], .nox-check-form input[type="text"] { flex: 1 1 220px; }

/* Checklist */
.nox-check-list { list-style: none; margin: 0 0 14px; padding: 0; }
.nox-check-item {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 7px 2px;
}
.nox-check-label { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
.nox-check-box { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--nox-blue); cursor: pointer; }
.nox-check-text { color: var(--nox-ink); }
.nox-check-item.is-done .nox-check-text { color: var(--nox-muted); text-decoration: line-through; }

/* ------------------------------------------------------------------ *
 * Task detail redesign (v0.35.0) — hero, two-column, tabs, avatars
 * ------------------------------------------------------------------ */
.nox-task-layout { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 20px; align-items: start; }
.nox-task-main, .nox-task-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .nox-task-layout { grid-template-columns: 1fr; } }

/* Hero */
.nox-task-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.nox-task-hero h1 { margin: 10px 0 0; font-size: 24px; line-height: 1.25; }
.nox-task-hero.is-finished h1 { color: var(--nox-muted); text-decoration: line-through; }
.nox-hero-main { min-width: 0; }
.nox-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nox-hero-actions { flex-shrink: 0; }

/* Chips */
.nox-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
	font-size: 12px; font-weight: 600; color: var(--nox-muted);
	background: var(--nox-pale); border: 1px solid var(--nox-line); border-radius: 999px; text-decoration: none; }
a.nox-chip:hover { color: var(--nox-blue-ink); }
.nox-chip-project::before { content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--mod-projects, #2E6EA6); }

.nox-section-h { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--nox-muted); }

/* Avatars + person chips */
.nox-ava { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
	object-fit: cover; flex-shrink: 0; font-weight: 600; line-height: 1; overflow: hidden;
	background: var(--nox-pale); border: 1px solid rgba(10, 31, 60, 0.06); }
.nox-person { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--nox-ink); max-width: 100%; }
.nox-person:hover .nox-person-name { color: var(--nox-blue-ink); }
.nox-person-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Activity tabs */
.nox-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--nox-line); margin: 0 0 16px; }
.nox-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
	padding: 9px 13px; font: inherit; font-size: 13px; font-weight: 600; color: var(--nox-muted); cursor: pointer; }
.nox-tab:hover { color: var(--nox-ink); }
.nox-tab.is-active { color: var(--nox-blue-ink); border-bottom-color: var(--nox-blue); }
.nox-tab-panel[hidden] { display: none; }

/* Comments */
.nox-comment-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.nox-comment { display: flex; gap: 12px; }
.nox-comment-main { flex: 1; min-width: 0; }
.nox-comment-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.nox-comment-who { font-weight: 600; color: var(--nox-ink); }
.nox-comment-body { margin: 0; background: var(--nox-pale); border: 1px solid var(--nox-line); border-radius: 10px; padding: 9px 12px; color: var(--nox-ink); }
.nox-comment-compose { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.nox-comment-compose textarea { flex: 1; }

/* Attachments */
.nox-file-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nox-file-row { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid var(--nox-line); border-radius: 10px; }
.nox-file-icon { color: var(--nox-muted); display: inline-flex; flex-shrink: 0; }
.nox-file-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nox-file-name { font-weight: 500; color: var(--nox-ink); text-decoration: none; }
.nox-file-name:hover { color: var(--nox-blue-ink); }
.nox-file-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--nox-muted); }
.nox-file-sub .nox-person-name { font-weight: 400; }

/* Time */
.nox-time-list { list-style: none; margin: 14px 0 0; padding: 0; }
.nox-time-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--nox-line); }
.nox-time-row:last-child { border-bottom: 0; }
.nox-time-amount { margin-left: auto; font-variant-numeric: tabular-nums; }
.nox-time-note { color: var(--nox-muted); }

/* Sidebar */
.nox-side-fields { margin: 4px 0 0; display: flex; flex-direction: column; gap: 13px; }
.nox-side-fields > div { display: flex; flex-direction: column; gap: 4px; }
.nox-side-fields dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--nox-muted); }
.nox-side-fields dd { margin: 0; color: var(--nox-ink); }
.nox-side-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--nox-muted); margin-bottom: 5px; }
.nox-side-status { margin-bottom: 12px; }
.nox-side-status-row { display: flex; gap: 6px; }
.nox-side-status-row select { flex: 1; min-width: 0; }
.nox-side-timer { margin: 0 0 16px; }
.nox-side-timer .nox-btn-small { width: 100%; justify-content: center; }

/* People list (avatar rows) */
.nox-people .nox-people-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nox-people .nox-people-list li { display: flex; align-items: center; gap: 8px; }
.nox-people .nox-people-list li .nox-person { flex: 1; min-width: 0; }
.nox-people .nox-people-list .nox-remove-form { margin-left: auto; }

/* ------------------------------------------------------------------ *
 * Account block at top of the nav (v0.36.0) — Mapal-style profile card
 * ------------------------------------------------------------------ */
.nox-nav-account {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 12px 14px;
	padding: 9px 10px;
	border-radius: 12px;
	background: var(--nox-pale);
	border: 1px solid var(--nox-line);
	text-decoration: none;
	color: var(--nox-ink);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.nox-nav-account:hover { background: var(--nox-white); border-color: var(--nox-bright); }
.nox-nav-account .nox-ava { border: 1px solid rgba(10, 31, 60, 0.08); }
.nox-nav-account-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nox-nav-account-name {
	font-family: var(--nox-font-head); font-weight: 700; font-size: 13.5px; line-height: 1.25;
	color: var(--nox-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nox-nav-account-email {
	font-size: 11.5px; line-height: 1.3; color: var(--nox-muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nox-nav-account-cog { flex: 0 0 auto; color: var(--nox-muted); display: inline-flex; }
.nox-nav-account:hover .nox-nav-account-cog { color: var(--nox-blue-ink); }

@media (max-width: 760px) {
	.nox-nav-account { margin: 2px 10px 8px; }
}

/* ================================================================== *
 * Updates / Feed module (v0.38.0)
 * Appended last so it wins by cascade order without editing views.
 * ================================================================== */

/* A livelier accent for the Updates hub (was muted grey). */
:root { --mod-feed: #5C6BC0; }

/* v0.241.0 — ink tokens.
   --nox-blue and --nox-navy are brand colours: they stay themselves in both
   themes because buttons and chrome need them to. But used as TEXT they are
   dark ink, and on a dark surface that is unreadable. These two adapt, and
   every `color:` that used to name a brand colour now names one of them. */
:root {
	--nox-blue-ink: var(--nox-blue);
	--nox-navy-ink: var(--nox-navy);
}
body[data-nox-theme="dark"] {
	--nox-blue-ink: #8FC7F0;
	--nox-navy-ink: var(--nox-ink);
}

/* Round out form inputs the events form uses (time / url) to match the
 * existing text/date styling. */
.nox-form-card input[type="time"],
.nox-form-card input[type="url"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--nox-line);
	border-radius: 6px;
	background: var(--nox-pale);
	color: var(--nox-ink);
	font: inherit;
}
.nox-form-card input[type="time"]:focus,
.nox-form-card input[type="url"]:focus {
	background: var(--nox-white);
	border-color: var(--nox-bright);
}
.nox-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nox-field-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--nox-muted); font-size: 11px; }
@media (max-width: 620px) { .nox-2col { grid-template-columns: 1fr; } }

/* ---- Two-column feed layout -------------------------------------- */
.nox-feed-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: start;
}
.nox-feed-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.nox-feed-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
@media (max-width: 900px) {
	.nox-feed-wrap { grid-template-columns: 1fr; }
	.nox-feed-rail { position: static; order: -1; }
}

/* ---- Composer ---------------------------------------------------- */
.nox-composer { padding: 14px 16px; }
.nox-composer-top { display: flex; gap: 12px; align-items: flex-start; }
.nox-composer-top .nox-ava { flex: 0 0 auto; }
.nox-composer-top textarea {
	flex: 1; min-width: 0; resize: vertical; min-height: 46px;
	border: 1px solid var(--nox-line); border-radius: 10px;
	background: var(--nox-pale); color: var(--nox-ink);
	padding: 10px 12px; font: inherit; line-height: 1.5;
}
.nox-composer-top textarea:focus { background: var(--nox-white); border-color: var(--nox-bright); outline: none; }
.nox-composer-extras { display: flex; align-items: center; gap: 10px; margin: 10px 0 0 52px; flex-wrap: wrap; }
.nox-composer-chip {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
	padding: 7px 12px; border-radius: 8px; border: 1px solid var(--nox-line);
	background: var(--nox-white); color: var(--nox-muted);
	font-family: var(--nox-font-head); font-weight: 600; font-size: 12.5px;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.nox-composer-chip:hover { border-color: var(--mod-feed); color: var(--mod-feed); }
.nox-composer-video { flex: 1; min-width: 180px; }
.nox-composer-video input {
	width: 100%; padding: 8px 11px; border: 1px solid var(--nox-line);
	border-radius: 8px; background: var(--nox-pale); color: var(--nox-ink); font: inherit;
}
.nox-composer-video input:focus { background: var(--nox-white); border-color: var(--nox-bright); outline: none; }
.nox-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0 52px; }
.nox-composer-hint { font-size: 12px; color: var(--nox-muted); }
.nox-img-preview { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 52px; }
.nox-img-thumb { width: 74px; height: 74px; object-fit: cover; border-radius: 8px; border: 1px solid var(--nox-line); }
@media (max-width: 620px) {
	.nox-composer-extras, .nox-composer-foot, .nox-img-preview { margin-left: 0; }
}

/* ---- Post -------------------------------------------------------- */
.nox-post { padding: 16px 18px; position: relative; }
.nox-post.is-pinned { border-color: color-mix(in srgb, var(--mod-feed) 40%, var(--nox-line)); }
.nox-post.is-hidden { opacity: 0.72; background: repeating-linear-gradient(-45deg, var(--nox-pale), var(--nox-pale) 12px, var(--nox-white) 12px, var(--nox-white) 24px); }
.nox-post-pinflag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--mod-feed); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.nox-post-hiddenflag { font-size: 12px; color: #9B1C1C; background: #FBE0E0; border-radius: 6px; padding: 5px 9px; margin-bottom: 10px; }
.nox-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nox-post-head .nox-person { font-family: var(--nox-font-head); font-weight: 700; }
.nox-post-time { font-size: 12px; color: var(--nox-muted); }
.nox-post-menu { margin-left: auto; position: relative; }
.nox-post-menu > summary,
.nox-comment-menu > summary {
	list-style: none; cursor: pointer; width: 28px; height: 28px; border-radius: 7px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--nox-muted); font-size: 18px; line-height: 1; user-select: none;
}
.nox-post-menu > summary::-webkit-details-marker,
.nox-comment-menu > summary::-webkit-details-marker { display: none; }
.nox-post-menu > summary:hover,
.nox-comment-menu > summary:hover { background: var(--nox-pale); color: var(--nox-ink); }
.nox-post-menu-pop {
	position: absolute; right: 0; top: 32px; z-index: 20;
	background: var(--nox-white); border: 1px solid var(--nox-line);
	border-radius: 10px; box-shadow: 0 10px 26px rgba(10, 31, 60, 0.14);
	padding: 6px; min-width: 168px; display: flex; flex-direction: column; gap: 2px;
}
.nox-menu-act {
	width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
	padding: 8px 10px; border-radius: 7px; font: inherit; font-size: 13.5px; color: var(--nox-ink);
}
.nox-menu-act:hover { background: var(--nox-pale); }
.nox-menu-danger { color: #B4232A; }
.nox-menu-danger:hover { background: #FBE0E0; }
.nox-post-body { font-size: 15px; line-height: 1.6; color: var(--nox-ink); white-space: normal; word-wrap: break-word; margin-bottom: 12px; }

/* Images */
.nox-post-media { display: grid; gap: 6px; margin-bottom: 12px; border-radius: 12px; overflow: hidden; }
.nox-post-media.n1 { grid-template-columns: 1fr; }
.nox-post-media.n2 { grid-template-columns: 1fr 1fr; }
.nox-post-media.n3 { grid-template-columns: repeat(3, 1fr); }
.nox-post-media.n4 { grid-template-columns: 1fr 1fr; }
.nox-post-img { display: block; overflow: hidden; background: var(--nox-pale); }
.nox-post-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nox-post-media.n1 .nox-post-img img { max-height: 540px; height: auto; }
.nox-post-media.n2 .nox-post-img img,
.nox-post-media.n3 .nox-post-img img,
.nox-post-media.n4 .nox-post-img img { aspect-ratio: 1 / 1; }

/* Video */
.nox-post-video { position: relative; aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: 12px; overflow: hidden; background: #000; }
.nox-post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Reactions */
.nox-post-actions { border-top: 1px solid var(--nox-line); padding-top: 10px; }
.nox-reacts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nox-reacts.is-busy { opacity: 0.6; pointer-events: none; }
.nox-react-btn {
	display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
	border: 1px solid var(--nox-line); background: var(--nox-white);
	border-radius: 999px; padding: 4px 10px; font: inherit; line-height: 1.2;
	transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.nox-react-btn:hover { background: var(--nox-pale); }
.nox-react-btn:active { transform: scale(0.94); }
.nox-react-btn .e { font-size: 15px; }
.nox-react-btn .n { font-size: 12.5px; font-weight: 700; color: var(--nox-muted); min-width: 8px; }
.nox-react-btn.is-mine { background: color-mix(in srgb, var(--mod-feed) 14%, var(--nox-white)); border-color: var(--mod-feed); }
.nox-react-btn.is-mine .n { color: var(--mod-feed); }

/* "Who reacted" affordance — the tally is the way in to the names. */
.nox-who-btn {
	display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
	border: 0; background: transparent; padding: 4px 8px; border-radius: 999px;
	font: inherit; line-height: 1.2; color: var(--nox-muted);
	transition: background 0.12s ease, color 0.12s ease;
}
.nox-who-btn:hover { background: var(--nox-pale); color: var(--nox-ink); }
.nox-who-n { font-size: 12.5px; font-weight: 700; }
.nox-who-label { font-size: 12px; }
.nox-who-emojis { font-size: 13px; letter-spacing: -1px; }

/*
 * A panel in the flow rather than an overlay. Floating it on top meant the
 * names covered the post or comment they belonged to, which is the one thing
 * you are looking at when you ask who reacted.
 */
.nox-who-pop {
	margin: 8px 0 4px;
	max-width: 340px; max-height: 320px; overflow-y: auto;
	background: var(--nox-pale); border: 1px solid var(--nox-line);
	border-radius: 12px; padding: 10px 12px;
}
.nox-who-loading { margin: 0; font-size: 13px; color: var(--nox-muted); }
.nox-who-group + .nox-who-group { margin-top: 10px; border-top: 1px solid var(--nox-line); padding-top: 10px; }
.nox-who-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.nox-who-emoji { font-size: 16px; }
.nox-who-count { font-size: 12px; font-weight: 700; color: var(--nox-muted); }
.nox-who-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nox-who-person {
	display: flex; align-items: center; gap: 8px; text-decoration: none;
	color: var(--nox-ink); font-size: 13.5px;
}
.nox-who-person:hover { text-decoration: underline; }

/* Reacting to a comment: one button that opens the palette. */
.nox-fc-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; position: relative; }
.nox-fcreact { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.nox-fcreact.is-busy { opacity: 0.6; pointer-events: none; }
.nox-fcreact-open {
	cursor: pointer; border: 0; background: transparent; padding: 3px 7px;
	border-radius: 999px; font: inherit; font-size: 14px; line-height: 1.2;
	color: var(--nox-muted); transition: background 0.12s ease;
}
.nox-fcreact-open:hover { background: var(--nox-pale); }
.nox-fcreact-open.is-mine { background: color-mix(in srgb, var(--mod-feed) 16%, transparent); }
/*
 * In the flow, not floating. It used to open upwards with bottom:100%, which
 * put it straight over the comment you were reacting to — you could not read
 * what you were about to react to. Inline it just widens the actions row.
 */
.nox-fcreact-palette {
	display: flex; align-items: center; gap: 2px;
	margin-left: 2px; padding: 2px 5px;
	background: var(--nox-pale); border: 1px solid var(--nox-line);
	border-radius: 999px;
}
.nox-fcreact-pick {
	cursor: pointer; border: 0; background: transparent; padding: 3px 5px;
	border-radius: 999px; font: inherit; font-size: 16px; line-height: 1;
	transition: transform 0.08s ease, background 0.12s ease;
}
.nox-fcreact-pick:hover { transform: scale(1.25); background: var(--nox-pale); }
.nox-fcreact-pick.is-mine { background: color-mix(in srgb, var(--mod-feed) 18%, transparent); }

/* Comments */
.nox-comments { margin-top: 12px; border-top: 1px solid var(--nox-line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.nox-comment { display: flex; gap: 9px; align-items: flex-start; }
.nox-comment .nox-ava { flex: 0 0 auto; margin-top: 2px; }
.nox-comment.is-hidden { opacity: 0.6; }
.nox-comment-bubble { background: var(--nox-pale); border-radius: 12px; padding: 8px 12px; flex: 1; min-width: 0; }
.nox-comment-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.nox-comment-name { font-family: var(--nox-font-head); font-weight: 700; font-size: 13px; color: var(--nox-ink); }
.nox-comment-time { font-size: 11.5px; color: var(--nox-muted); }
.nox-comment-hiddentag { font-size: 11px; color: #9B1C1C; text-transform: uppercase; letter-spacing: 0.04em; }
.nox-comment-text { font-size: 14px; line-height: 1.5; color: var(--nox-ink); word-wrap: break-word; }
.nox-comment-menu { flex: 0 0 auto; }
.nox-comment-menu > summary { width: 24px; height: 24px; font-size: 16px; }
.nox-comment-add { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.nox-comment-add .nox-ava { flex: 0 0 auto; }
.nox-comment-add input[type="text"] {
	flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--nox-line);
	border-radius: 999px; background: var(--nox-pale); color: var(--nox-ink); font: inherit;
}
.nox-comment-add input[type="text"]:focus { background: var(--nox-white); border-color: var(--nox-bright); outline: none; }

.nox-feed-more { text-align: center; margin: 4px 0 0; }

/* ---- Right rail cards -------------------------------------------- */
.nox-rail-card { padding: 14px 16px; }
.nox-rail-head { display: flex; align-items: center; justify-content: space-between; }
.nox-rail-title { font-family: var(--nox-font-head); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nox-navy-ink); margin: 0 0 12px; }
.nox-rail-head .nox-rail-title { margin-bottom: 12px; }
.nox-rail-link { font-size: 12.5px; font-weight: 600; color: var(--nox-blue-ink); text-decoration: none; }
.nox-rail-link:hover { text-decoration: underline; }
.nox-rail-empty { margin: 0; font-size: 13px; }
.nox-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nox-rail-item { display: flex; align-items: center; gap: 10px; }
.nox-rail-item .nox-ava { flex: 0 0 auto; }
.nox-rail-meta { display: flex; flex-direction: column; min-width: 0; }
.nox-rail-name { font-family: var(--nox-font-head); font-weight: 700; font-size: 13.5px; color: var(--nox-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.nox-rail-name:hover { color: var(--nox-blue-ink); }
.nox-rail-sub { font-size: 12px; color: var(--nox-muted); }
.nox-rail-item.is-today .nox-rail-name { color: var(--mod-feed); }
.nox-rail-cta { display: inline-block; margin-top: 12px; }

/* Date badge (rail + events page) */
.nox-rail-date {
	flex: 0 0 auto; width: 42px; height: 46px; border-radius: 10px;
	background: color-mix(in srgb, var(--mod-feed) 12%, var(--nox-white));
	border: 1px solid color-mix(in srgb, var(--mod-feed) 30%, var(--nox-line));
	display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.nox-rail-date-d { font-family: var(--nox-font-head); font-weight: 800; font-size: 17px; color: var(--mod-feed); }
.nox-rail-date-m { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nox-muted); margin-top: 2px; }

/* ---- Events page ------------------------------------------------- */
.nox-event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nox-event-row { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--nox-line); }
.nox-event-row:first-child { border-top: 0; }
.nox-event-date { width: 52px; height: 56px; }
.nox-event-date .nox-rail-date-d { font-size: 20px; }
.nox-event-body { flex: 1; min-width: 0; }
.nox-event-title { font-family: var(--nox-font-head); font-weight: 700; font-size: 16px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nox-event-when { font-size: 13px; color: var(--nox-muted); margin: 0 0 6px; }
.nox-event-desc { font-size: 14px; line-height: 1.55; color: var(--nox-ink); margin: 0 0 8px; }
.nox-event-row.is-past { opacity: 0.7; }
.nox-event-row.is-cancelled .nox-event-title { text-decoration: line-through; text-decoration-color: var(--nox-muted); }
.nox-event-tools { display: flex; align-items: center; gap: 8px; }
.nox-event-tools form { margin: 0; }

/* ================================================================== *
 * Full-width & responsive layer (v0.39.0)
 * The app shell now fills the viewport at every width. Appended last so
 * these rules win by cascade order without editing every view.
 * ================================================================== */

/* Content area fills all remaining space beside the nav (no fixed cap). */
.nox-main { max-width: none; }
.nox-main > * { min-width: 0; }

/* A full-width panel shouldn't stretch text inputs across the whole screen —
 * keep form controls to a comfortable, readable width (left-aligned). */
.nox-form-card input[type="text"],
.nox-form-card input[type="date"],
.nox-form-card input[type="time"],
.nox-form-card input[type="url"],
.nox-form-card input[type="number"],
.nox-form-card input[type="email"],
.nox-form-card input[type="password"],
.nox-form-card select,
.nox-form-card textarea { max-width: 760px; }

/* Wide data tables scroll inside their card instead of overflowing the page. */
.nox-table-card,
.nox-table-wrap { overflow-x: auto; }

/* Feed: give the rail a little more room on wide screens; on small screens
 * the composer/posts come first and the rail follows underneath. */
@media (min-width: 1500px) {
	.nox-feed-wrap { grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; }
}
@media (max-width: 900px) {
	.nox-feed-rail { order: 0; position: static; }
}

/* -------- Mobile (<=760px): nav becomes a horizontal scroll strip -------- */
@media (max-width: 760px) {
	.nox-layout { grid-template-columns: 1fr; }
	.nox-nav {
		border-right: 0;
		border-bottom: 1px solid var(--nox-line);
		padding: 6px 0 0;
		position: sticky;
		top: 0;
		z-index: 40;
	}
	.nox-nav-account { margin: 8px 12px; }
	.nox-nav ul {
		display: flex;
		gap: 4px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 2px 10px;
	}
	.nox-nav ul::-webkit-scrollbar { display: none; }
	.nox-nav li {
		flex: 0 0 auto;
		padding: 0;
		border-left: 0;
		border-bottom: 3px solid transparent;
	}
	.nox-nav li .nox-nav-label {
		padding: 8px 12px 10px;
		border-radius: 10px 10px 0 0;
	}
	.nox-nav li.nox-nav-item.is-active { border-left: 0; border-bottom-color: var(--mod, var(--nox-bright)); }
	.nox-nav li.is-soon { display: none; } /* reserved items are hidden on mobile */
	.nox-main { padding: 20px 16px; }
}

/* Very small phones: tighten the header and let the user name shrink away. */
@media (max-width: 480px) {
	.nox-header { padding: 0 14px; }
	.nox-header-user { gap: 10px; font-size: 13px; }
	.nox-header-user > span { display: none; }        /* hide the long display name */

	.nox-page-head { flex-wrap: wrap; gap: 10px; }
}

/* ================================================================== *
 * Events calendar + recurrence (v0.40.0)
 * ================================================================== */

/* Event chips inside calendar day cells, tinted with the Updates accent. */
.nox-cal-event {
	background: color-mix(in srgb, var(--mod-feed) 14%, #ffffff);
	border-left-color: var(--mod-feed);
	color: var(--nox-navy-ink);
	cursor: default;
}
a.nox-cal-event { cursor: pointer; }
a.nox-cal-event:hover { background: color-mix(in srgb, var(--mod-feed) 24%, #ffffff); }

/* Cancelled occurrences: struck through and muted. */
.nox-cal-event.is-cancelled {
	text-decoration: line-through;
	background: var(--nox-pale);
	border-left-color: var(--nox-muted);
	color: var(--nox-muted);
}

/* Past days are greyed, and any events on them fade back. */
.nox-cal-cell.is-past { background: #F3F5F8; border-color: #ECF0F4; }
.nox-cal-cell.is-past .nox-cal-daynum { color: #A9B6C2; }
.nox-cal-cell.is-past .nox-cal-event {
	background: #EEF1F5;
	border-left-color: #B7C2CE;
	color: var(--nox-muted);
	opacity: 0.85;
}

/* Give the events calendar a bit more room per day for stacked events. */
.nox-events-cal .nox-cal-cell { min-height: 104px; }
@media (max-width: 900px) {
	.nox-events-cal .nox-cal-cell { min-height: 72px; }
}

/* Recurrence badge in the upcoming/past lists. */
.nox-badge-recur {
	background: color-mix(in srgb, var(--mod-feed) 16%, #ffffff);
	color: var(--mod-feed);
	border: 1px solid color-mix(in srgb, var(--mod-feed) 32%, var(--nox-line));
}

/* Clearer greying of past events in the list. */
.nox-event-row.is-past { opacity: 1; }
.nox-event-row.is-past .nox-event-title,
.nox-event-row.is-past .nox-event-when,
.nox-event-row.is-past .nox-event-desc { color: var(--nox-muted); }
.nox-event-row.is-past .nox-event-date {
	background: #F1F4F7;
	border-color: var(--nox-line);
}
.nox-event-row.is-past .nox-rail-date-d { color: var(--nox-muted); }

/* The month nav header row on the events page. */
.nox-events-cal ~ .nox-att-week-nav,
.nox-card > .nox-dash-head .nox-att-week-nav { align-items: center; }

/* ===================================================================
 * Customizable dashboard widgets (v0.42.0)
 * ================================================================ */
.nox-dash-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nox-customize-btn { white-space: nowrap; }

.nox-edit-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	background: var(--nox-pale); border: 1px solid var(--nox-line); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.nox-edit-hint { color: var(--nox-muted); font-size: 13px; }
.nox-edit-actions { display: flex; align-items: center; gap: 8px; }

.nox-wgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.nox-wspan-1 { grid-column: span 1; }
.nox-wspan-2 { grid-column: span 2; }
.nox-wspan-3 { grid-column: span 3; }
.nox-wspan-4 { grid-column: span 4; }

.nox-wcard { background: var(--nox-white); border: 1px solid var(--nox-line); border-radius: 14px; padding: 14px 16px;
	box-shadow: 0 1px 2px rgba(15, 34, 51, .04); display: flex; flex-direction: column; min-width: 0; }
.nox-wcard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.nox-wcard-title { font-size: 13px; font-weight: 600; color: var(--nox-muted); margin: 0; flex: 1; letter-spacing: .01em; }
.nox-wopen { color: var(--nox-blue-ink); text-decoration: none; font-size: 16px; line-height: 1; opacity: .6; }
.nox-wopen:hover { opacity: 1; }
.nox-wdrag { cursor: grab; color: var(--nox-muted); font-size: 15px; line-height: 1; user-select: none; }
.nox-wghost { opacity: .45; }

.nox-wtools { display: flex; align-items: center; gap: 8px; }
.nox-wwidth { display: inline-flex; border: 1px solid var(--nox-line); border-radius: 8px; overflow: hidden; }
.nox-wwbtn { border: 0; background: var(--nox-white); color: var(--nox-muted); width: 24px; height: 24px; font-size: 12px; cursor: pointer; }
.nox-wwbtn + .nox-wwbtn { border-left: 1px solid var(--nox-line); }
.nox-wwbtn.is-active { background: var(--nox-blue); color: #fff; }
.nox-wtoggle { border: 1px solid var(--nox-line); background: var(--nox-white); color: var(--nox-muted); width: 24px; height: 24px;
	border-radius: 8px; cursor: pointer; font-size: 12px; line-height: 1; }
.nox-wtoggle:hover { border-color: #B4232A; color: #B4232A; }
.nox-wtoggle-add:hover { border-color: var(--nox-blue); color: var(--nox-blue-ink); }
.nox-wbody { flex: 1; min-width: 0; }

.nox-w-metric { display: flex; flex-direction: column; gap: 6px; }
.nox-w-mtop { display: flex; align-items: center; justify-content: space-between; }
.nox-w-mval { font-family: 'Montserrat', sans-serif; font-size: 30px; font-weight: 700; color: var(--nox-navy-ink); line-height: 1.05; }
.nox-w-mbottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.nox-w-mhint { color: var(--nox-muted); font-size: 12px; }
.nox-w-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--nox-line); flex: none; }
.nox-w-dot.nox-tone-ok { background: #1E9E5A; }
.nox-w-dot.nox-tone-warn { background: #C08A00; }
.nox-w-dot.nox-tone-alert { background: #B4232A; }
.nox-w-spark { display: block; }

.nox-w-chartbox { position: relative; width: 100%; height: 240px; }

.nox-w-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nox-w-li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--nox-line); font-size: 13px; }
.nox-w-li:last-child { border-bottom: 0; }
.nox-w-li-main { flex: 1; color: var(--nox-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-w-li-verb { color: var(--nox-muted); }
.nox-w-li-sub { color: var(--nox-muted); font-size: 12px; }
.nox-w-li-tag { color: var(--nox-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.nox-w-li-tag.nox-tone-warn { color: #C08A00; }
.nox-w-li-tag.nox-tone-alert { color: #B4232A; }
.nox-w-li-person .nox-person { flex: 1; min-width: 0; }
.nox-w-empty { color: var(--nox-muted); font-size: 13px; margin: 4px 0; }

.nox-wtray-wrap { margin-top: 22px; }
.nox-wtray-title { font-size: 15px; margin: 0 0 2px; }
.nox-wtray-hint { color: var(--nox-muted); font-size: 13px; margin: 0 0 12px; }
.nox-wtray .nox-wcard { border-style: dashed; background: var(--nox-pale); }

@media (max-width: 1200px) {
	.nox-wgrid { grid-template-columns: repeat(2, 1fr); }
	.nox-wspan-3, .nox-wspan-4 { grid-column: span 2; }
}
@media (max-width: 680px) {
	.nox-wgrid { grid-template-columns: 1fr; }
	.nox-wspan-1, .nox-wspan-2, .nox-wspan-3, .nox-wspan-4 { grid-column: span 1; }
	.nox-edit-bar { flex-direction: column; align-items: stretch; }
}

/* ===================================================================
 * Dashboard widget list layout (v0.47.0) — verified by static render
 * Clean single-column lists: header on top, one item per line, a clear
 * full-width divider between lines, comfortable padding from the card
 * border, and the title + meta sitting together (no mid-row void, no
 * empty band, no header displacement — the faults of 0.44–0.46).
 * ================================================================ */
.nox-w-mtop { justify-content: flex-start; gap: 10px; }

/* Card is a vertical stack: header on top, body below. */
.nox-wcard { flex-direction: column; }
.nox-wcard.nox-w-list { max-width: none; padding: 14px 18px 8px; }
.nox-wcard-head { width: 100%; }

/* One item per line, clear divider, edge padding, tight title+meta. */
.nox-w-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nox-w-li { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--nox-line); font-size: 13px; }
.nox-w-li:last-child { border-bottom: 0; }
.nox-w-li-main { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-w-li-tag { flex: 0 0 auto; }
.nox-w-li-person .nox-person { flex: 0 1 auto; min-width: 0; }

/* ===================================================================
 * Dashboard widget SVG enrichment (v0.48.0)
 * Accent module-icon chip in every card header; progress ring for ratio
 * metrics; sparkbars for weekly series. Icons reuse nav_icon() (single
 * colour, currentColor) — accent only, no decoration.
 * ================================================================ */
.nox-wic { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.nox-wic .nox-ico { width: 19px; height: 19px; }

.nox-w-ringwrap { display: flex; align-items: center; gap: 14px; }
.nox-w-ring { position: relative; width: 76px; height: 76px; flex: none; }
.nox-w-ring-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px; color: var(--nox-navy-ink); }
.nox-w-ring-side .l1 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; color: var(--nox-navy-ink); line-height: 1.2; }
.nox-w-ring-side .l2 { color: var(--nox-muted); font-size: 12px; line-height: 1.35; }

.nox-w-bars { display: block; margin-top: 8px; }

/* ===================================================================
 * Sales analytics — granular filters + multi-chart grid (v0.49.0)
 * Appended layer: wins by cascade order without touching earlier rules.
 * ================================================================ */
.nox-note-soft { background: var(--nox-pale); border-color: transparent; }
.nox-note-soft p { color: var(--nox-navy-ink); }
.nox-note-soft a { color: var(--nox-blue-ink); font-weight: 600; }

.nox-sales-filters .nox-filter-tabs { margin-bottom: 14px; }

.nox-filter-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px 16px;
	align-items: end;
	margin: 0 0 4px;
}
.nox-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nox-fld > span { font-size: 12px; font-weight: 600; color: var(--nox-muted); }
.nox-fld input,
.nox-fld select {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid var(--nox-line);
	border-radius: 9px;
	background: var(--nox-white);
	color: var(--nox-ink);
	font: inherit;
	font-size: 14px;
}
.nox-fld input:focus,
.nox-fld select:focus { outline: none; border-color: var(--nox-bright); box-shadow: 0 0 0 3px var(--nox-pale); }
.nox-fld-sm input { max-width: 100%; }
.nox-fld-actions { display: flex; align-items: center; gap: 10px; }
.nox-fld-actions .nox-btn,
.nox-fld-actions .nox-btn-ghost { white-space: nowrap; }

.nox-sales-kpis { gap: 12px; }
.nox-sales-kpis .nox-att-metric { flex: 1 1 140px; }

.nox-sales-charts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 4px;
}
.nox-chart-card { margin: 0; }
.nox-chart-card h2 { margin: 0 0 12px; }
.nox-chart-wide { grid-column: 1 / -1; }
.nox-chart-box { position: relative; width: 100%; height: 300px; }
.nox-chart-wide .nox-chart-box { height: 320px; }
.nox-chart-box canvas { position: absolute; inset: 0; }

@media (max-width: 1100px) {
	.nox-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nox-fld-actions { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
	.nox-sales-charts { grid-template-columns: 1fr; }
	.nox-chart-wide { grid-column: auto; }
}
@media (max-width: 560px) {
	.nox-filter-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
 * Dashboard masonry — tight, gap-free stacking in view mode (v0.49.1)
 * Fixes the row-height coupling of the plain grid, where a short widget
 * beside a tall one left a page-coloured gap. JS adds .nox-masonry-on and
 * sets each card's grid-row span from its measured height. Without JS the
 * grid falls back to the normal layout above; edit mode keeps the plain
 * grid so drag/resize geometry stays predictable.
 * ================================================================ */
.nox-wgrid.nox-masonry-on { grid-auto-rows: 8px; row-gap: 0; align-items: start; grid-auto-flow: row dense; }
.nox-wgrid.nox-masonry-on > .nox-wcard { align-self: start; }

/* =====================================================================
 * v0.49.2 · Per-tile ⚙ filter & sort controls
 * ================================================================== */
.nox-wctrl { position: relative; display: inline-flex; }
.nox-wctrl.is-open { z-index: 40; }
.nox-wgear { position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent;
	color: var(--nox-muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.nox-wgear:hover { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-wgear.is-tuned { color: var(--nox-blue-ink); }
.nox-wgear.is-tuned::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px;
	border-radius: 50%; background: var(--nox-bright); box-shadow: 0 0 0 2px var(--nox-white); }
.nox-wmenu { display: none; }
.nox-wctrl.is-open .nox-wmenu { display: block; position: absolute; top: 34px; right: 0; z-index: 50;
	width: min(232px, 78vw); padding: 14px; background: var(--nox-white); border: 1px solid var(--nox-line);
	border-radius: 14px; box-shadow: 0 14px 32px rgba(10, 31, 60, .17); text-align: left; }
.nox-wmenu-fld { display: block; margin-bottom: 10px; }
.nox-wmenu-fld > span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .03em; color: var(--nox-muted); margin-bottom: 4px; }
.nox-wmenu-fld select { width: 100%; padding: 7px 9px; border: 1px solid var(--nox-line); border-radius: 9px;
	background: var(--nox-white); color: var(--nox-ink); font-size: 13px; font-family: inherit; }
.nox-wmenu-fld select:focus { outline: none; border-color: var(--nox-blue); box-shadow: 0 0 0 3px var(--nox-pale); }
.nox-wmenu-actions { display: flex; gap: 8px; margin-top: 12px; }
.nox-wmenu-apply { flex: 1; padding: 8px 10px; border: 0; border-radius: 9px; font-weight: 600; font-size: 13px;
	color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--nox-blue), var(--nox-bright)); }
.nox-wmenu-apply:hover { filter: brightness(1.04); }
.nox-wmenu-reset { padding: 8px 12px; border: 1px solid var(--nox-line); border-radius: 9px; background: var(--nox-white);
	color: var(--nox-muted); font-size: 13px; cursor: pointer; }
.nox-wmenu-reset:hover { color: var(--nox-blue-ink); border-color: var(--nox-blue); }
.nox-wmenu-note { margin: 0; font-size: 12.5px; color: var(--nox-muted); line-height: 1.5; }

/* Sales dashboard · per-chart ⚙ header (reuses .nox-wctrl/.nox-wgear/.nox-wmenu) */
.nox-chart-card { overflow: visible; }
.nox-chart-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.nox-chart-head h2 { flex: 1; margin: 0; }

/* Sales dashboard · visualization scenarios */
.nox-scenarios { overflow: visible; }
.nox-scn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.nox-scn-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.nox-scn-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--nox-muted); }
.nox-scn-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--nox-r-pill);
	border: 1px solid var(--nox-line); background: var(--nox-white); color: var(--nox-ink); font-size: 13px;
	font-weight: 600; text-decoration: none; line-height: 1.3; transition: border-color .12s, background .12s, color .12s; }
.nox-scn-chip:hover { border-color: var(--nox-blue); color: var(--nox-blue-ink); }
.nox-scn-chip.is-active { background: linear-gradient(135deg, var(--nox-blue), var(--nox-bright)); border-color: transparent; color: #fff; }
.nox-scn-chip-shared { border-style: dashed; }
.nox-scn-tag { font-size: 11px; opacity: .75; }
.nox-scn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nox-scn-del { color: var(--nox-muted); }
.nox-scn-del:hover { color: #B03A2E; }
.nox-scn-active-hint { margin-top: 10px; }

/* Save / edit popover — native <details> so no extra JS */
.nox-scn-pop { position: relative; }
.nox-scn-pop > summary { list-style: none; cursor: pointer; }
.nox-scn-pop > summary::-webkit-details-marker { display: none; }
.nox-scn-panel { position: absolute; top: 34px; right: 0; z-index: 60; width: min(320px, 88vw); padding: 16px;
	background: var(--nox-white); border: 1px solid var(--nox-line); border-radius: 14px;
	box-shadow: 0 14px 32px rgba(10, 31, 60, .17); text-align: left; }
.nox-scn-fld { display: block; margin-bottom: 12px; }
.nox-scn-fld > span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .03em; color: var(--nox-muted); margin-bottom: 5px; }
.nox-scn-fld input[type="text"] { width: 100%; padding: 8px 10px; border: 1px solid var(--nox-line); border-radius: 9px;
	background: var(--nox-white); color: var(--nox-ink); font-size: 13px; font-family: inherit; box-sizing: border-box; }
.nox-scn-fld input[type="text"]:focus { outline: none; border-color: var(--nox-blue); box-shadow: 0 0 0 3px var(--nox-pale); }
.nox-scn-radio { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--nox-ink); margin: 4px 0; cursor: pointer; }
.nox-scn-recapture { margin: 10px 0 14px; padding-top: 10px; border-top: 1px solid var(--nox-line); }
.nox-scn-charts { border: 1px solid var(--nox-line); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.nox-scn-charts legend { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
	color: var(--nox-muted); padding: 0 4px; }
.nox-scn-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--nox-ink); margin: 5px 0; cursor: pointer; }
.nox-scn-panel .nox-btn { width: 100%; }

@media (max-width: 640px) {
	.nox-scn-bar { flex-direction: column; align-items: stretch; }
	.nox-scn-panel { right: auto; left: 0; }
}

/* Sales dashboard · collapsible filter panel */
.nox-filters { padding: 0; }
.nox-filters > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
	padding: 16px 20px; user-select: none; }
.nox-filters > summary::-webkit-details-marker { display: none; }
.nox-filters > summary:hover .nox-filters-btn { color: var(--nox-blue-ink); }
.nox-filters-btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px;
	color: var(--nox-ink); white-space: nowrap; }
.nox-filters-active { flex: 1; min-width: 0; color: var(--nox-muted); font-size: 13px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-filters-caret { color: var(--nox-muted); transition: transform .15s ease; }
.nox-filters[open] .nox-filters-caret { transform: rotate(180deg); }
.nox-filters-body { padding: 0 20px 18px; border-top: 1px solid var(--nox-line); margin-top: 2px; }
.nox-filters-body .nox-filter-tabs { margin-top: 16px; }

/* Sales dashboard · per-chart helper one-liner */
.nox-chart-card h2 { margin: 0 0 4px; }
.nox-chart-head { margin-bottom: 6px; }
.nox-chart-sub { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--nox-muted); }
.nox-adaptive-note { font-style: italic; }

/* Review requests table — per-row actions + category tag */
.nox-req-actions-col { text-align: right; }
.nox-req-actions { white-space: nowrap; text-align: right; }
.nox-req-actions .nox-btn-quiet { margin-left: 10px; }
.nox-review-cat { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--nox-r-pill);
	background: var(--nox-surface-2); color: var(--nox-muted); font-size: 11px; font-weight: 600; vertical-align: middle; }

/* Requests & forms widget — per-row actions + footer links */
.nox-w-li-actions { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.nox-w-li-actions a { font-size: 12px; font-weight: 600; color: var(--nox-muted); text-decoration: none; }
.nox-w-li-actions a:hover { color: var(--nox-blue-ink); }
.nox-w-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
	margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--nox-line); }
.nox-w-foot a { font-size: 12.5px; font-weight: 600; color: var(--nox-blue-ink); text-decoration: none; }
.nox-w-foot a:hover { text-decoration: underline; }

/* Print — strip app chrome so a single form prints as a clean document */
@media print {
	.nox-header, .nox-nav, .nox-tabs, .nox-breadcrumb, .nox-no-print, .nox-print-btn { display: none !important; }
	.nox-layout, .nox-main { display: block !important; margin: 0 !important; padding: 0 !important; }
	body.nox-app-body { background: #fff !important; }
	.nox-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
	a[href]::after { content: ''; } /* don't print raw URLs */
}

/* ==========================================================================
   Global search + command palette (v0.50.0)
   Appended last so it wins at equal specificity via cascade order.
   ========================================================================== */

/* --- Header trigger ---------------------------------------------------- */
.nox-search-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 28px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.82);
	font: 600 12.5px/1 'Open Sans', sans-serif;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.nox-search-trigger:hover,
.nox-search-trigger:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
	outline: none;
}
.nox-search-kbd {
	padding: 2px 7px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 6px;
	font: 600 10.5px/1.3 'Open Sans', sans-serif;
	color: rgba(255, 255, 255, 0.65);
	background: rgba(10, 31, 60, 0.35);
}
@media (max-width: 760px) {
	.nox-search-trigger { margin-left: auto; padding: 8px; border-radius: 10px; }
	.nox-search-trigger-txt,
	.nox-search-kbd { display: none; }
}

/* --- Palette overlay --------------------------------------------------- */
.nox-cmdk { display: none; }
.nox-cmdk.is-open {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 1200;
}
body.nox-cmdk-lock { overflow: hidden; }

.nox-cmdk-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 31, 60, 0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.nox-cmdk-panel {
	position: relative;
	width: min(640px, calc(100vw - 32px));
	margin: 11vh auto 0;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(10, 31, 60, 0.35), 0 4px 16px rgba(10, 31, 60, 0.18);
	overflow: hidden;
	animation: nox-cmdk-in 0.14s ease-out;
}
@keyframes nox-cmdk-in {
	from { opacity: 0; transform: translateY(-8px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.nox-cmdk-panel { animation: none; }
}
@media (max-width: 760px) {
	.nox-cmdk-panel { margin-top: 8px; width: calc(100vw - 16px); }
}

.nox-cmdk-inputwrap {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--nox-line);
	color: var(--nox-muted);
}
.nox-cmdk-inputwrap input {
	flex: 1;
	border: 0;
	outline: none;
	font: 600 16px/1.4 'Open Sans', sans-serif;
	color: var(--nox-ink);
	background: transparent;
}
.nox-cmdk-inputwrap input::placeholder { color: var(--nox-muted); font-weight: 400; }
.nox-cmdk-close {
	padding: 4px 9px;
	border: 1px solid var(--nox-line);
	border-radius: 7px;
	background: var(--nox-pale);
	color: var(--nox-muted);
	font: 600 11px/1.3 'Open Sans', sans-serif;
	cursor: pointer;
}

.nox-cmdk-list {
	max-height: min(52vh, 460px);
	overflow-y: auto;
	padding: 8px;
}
.nox-cmdk-label {
	padding: 10px 12px 5px;
	font: 700 10.5px/1 'Montserrat', sans-serif;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--nox-muted);
}
.nox-cmdk-item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 12px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--nox-ink);
	font: 600 13.5px/1.4 'Open Sans', sans-serif;
	cursor: pointer;
}
.nox-cmdk-item:hover,
.nox-cmdk-item.is-active {
	background: var(--nox-pale);
}
.nox-cmdk-item.is-active {
	box-shadow: inset 0 0 0 1.5px var(--nox-bright);
}
.nox-cmdk-ic {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--nox-pale);
	color: var(--nox-blue-ink);
}
.nox-cmdk-ic svg { display: block; }
.nox-cmdk-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nox-cmdk-title mark {
	background: rgba(41, 171, 226, 0.22);
	color: inherit;
	border-radius: 3px;
	padding: 0 1px;
}
.nox-cmdk-meta {
	flex: 0 0 auto;
	max-width: 40%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--nox-muted);
	font: 400 12px/1.4 'Open Sans', sans-serif;
}
.nox-cmdk-empty {
	padding: 26px 16px;
	text-align: center;
	color: var(--nox-muted);
	font: 400 13px/1.5 'Open Sans', sans-serif;
}
.nox-cmdk-foot {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-top: 1px solid var(--nox-line);
	background: #FAFCFE;
	color: var(--nox-muted);
	font: 400 11.5px/1.4 'Open Sans', sans-serif;
}
.nox-cmdk-foot kbd {
	padding: 1px 6px;
	border: 1px solid var(--nox-line);
	border-radius: 5px;
	background: #fff;
	font: 600 10.5px/1.4 'Open Sans', sans-serif;
	color: var(--nox-muted);
}

/* Module accents on result icons — reuse the palette hues. */
.nox-cmdk-ic-tasks     { color: #0E7490; background: rgba(14, 116, 144, 0.1); }
.nox-cmdk-ic-projects  { color: #2E6EA6; background: rgba(46, 110, 166, 0.1); }
.nox-cmdk-ic-inventory,
.nox-cmdk-ic-skus      { color: #1B9C8F; background: rgba(27, 156, 143, 0.1); }
.nox-cmdk-ic-quality   { color: #B7791F; background: rgba(183, 121, 31, 0.12); }
.nox-cmdk-ic-people    { color: #6D4AA3; background: rgba(109, 74, 163, 0.1); }
.nox-cmdk-ic-kb        { color: #2079B0; background: rgba(32, 121, 176, 0.1); }
.nox-cmdk-ic-actions   { color: var(--nox-blue-ink); background: var(--nox-pale); }

/* SKU catalogue — min/max levels (v0.51.0) */
.nox-sku-minmax { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nox-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nox-table-scroll > table { min-width: 430px; }

/* Sales — channel mix card (v0.53.0) */
.nox-channel-mix .nox-mix-row { flex-wrap: wrap; }
.nox-mix-links { display: flex; gap: 10px; margin: 12px 0 0; }

/* QC defect types — cause & corrective action details (v0.54.0) */
.nox-dt-detail { margin-top: 4px; font-size: 12.5px; }
.nox-dt-detail summary { color: var(--nox-blue-ink); cursor: pointer; font-weight: 600; }
.nox-dt-detail p { margin: 6px 0 0; color: var(--nox-muted); max-width: 60ch; }

/* v0.55.0 — SKU sale contents + defect knowledge hint */
.nox-sku-contents ul { margin: 6px 0 0 16px; padding: 0; color: var(--nox-muted); }
.nox-sku-contents li { margin: 2px 0; font-size: 12.5px; }
.nox-form-subhead { margin: 22px 0 4px; font-size: 15px; color: var(--nox-navy-ink); }
.nox-comp-row { align-items: center; }
.nox-comp-del { white-space: nowrap; font-size: 12.5px; color: var(--nox-muted); }
.nox-defect-hint { margin-top: 8px; padding: 10px 12px; background: var(--nox-pale); border-left: 3px solid var(--nox-bright); border-radius: 8px; font-size: 12.5px; }
.nox-defect-hint p { margin: 3px 0; color: var(--nox-ink); }
.nox-comp-linked { color: var(--nox-teal, #1B9C8F); font-size: 11px; font-weight: 600; }

/* v0.57.0 — Production & Quality: SKU stock */
.nox-sku-stock { font-variant-numeric: tabular-nums; font-weight: 600; }
.nox-stock-low  { background: #FDE8E8; color: #B42318; }
.nox-stock-over { background: #FdF3D7; color: #8A5A00; }
.nox-prod-summary .nox-att-today { flex-wrap: wrap; }

/* v0.60.0 — event↔project link */
.nox-event-project { margin: 6px 0 0; }
.nox-project-event { margin: 2px 0 0; font-size: 12.5px; color: var(--nox-muted); }
.nox-project-event a { color: var(--nox-blue-ink); }

/* =========================================================================
   v0.62.0 — Security page (2FA + Webex), 2FA login step, Drive export links
   ========================================================================= */

/* --- Security & notifications page --- */
.nox-sec-card { margin-bottom: 18px; }
.nox-sec-card h2 { margin-top: 0; }
.nox-sec-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	margin: 4px 0 10px;
}
.nox-sec-on  { color: var(--nox-teal, #1B9C8F); }
.nox-sec-off { color: var(--nox-muted); }
.nox-sec-since { font-weight: 400; color: var(--nox-muted); font-size: 13px; }
.nox-sec-help {
	color: var(--nox-muted);
	font-size: 13.5px;
	line-height: 1.55;
	max-width: 62ch;
	margin: 8px 0;
}
.nox-sec-inline-form { margin: 14px 0 0; }
.nox-sec-inline-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.nox-sec-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nox-sec-row input[type="text"],
.nox-sec-row input[type="email"] {
	width: 160px;
	letter-spacing: 3px;
	font-size: 17px;
	text-align: center;
	padding: 9px 10px;
	border: 1px solid var(--nox-line);
	border-radius: 10px;
}

/* --- 2FA enrolment QR --- */
.nox-2fa-qr {
	display: inline-block;
	padding: 12px;
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: 14px;
	margin: 8px 0;
	line-height: 0;
}
.nox-2fa-qr svg { width: 200px; height: 200px; display: block; }
.nox-2fa-key { font-size: 13.5px; color: var(--nox-ink); margin: 4px 0 4px; }
.nox-2fa-key code {
	background: var(--nox-pale);
	padding: 3px 8px;
	border-radius: 7px;
	letter-spacing: 1px;
	font-size: 13.5px;
}

/* --- 2FA login step --- */
.nox-login-info {
	background: var(--nox-pale);
	border-left: 3px solid var(--nox-blue);
	color: var(--nox-ink);
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	margin: 0 0 14px;
}
.nox-2fa-alt { margin-top: 10px; text-align: center; }
.nox-2fa-email-btn {
	background: none;
	border: none;
	color: var(--nox-bright);
	font-size: 13.5px;
	cursor: pointer;
	padding: 4px;
	text-decoration: underline;
	width: auto;
}
.nox-2fa-email-btn:hover { color: var(--nox-blue-ink); }

/* --- "→ Drive" companion export links --- */
.nox-drive-link {
	color: var(--nox-teal, #1B9C8F) !important;
	font-weight: 600;
	white-space: nowrap;
}
.nox-drive-link:hover { color: var(--nox-blue-ink) !important; }

/* =========================================================================
   v0.63.0 — Files (Google Drive) browser + preview
   ========================================================================= */
:root { --mod-files: #E9A50B; }
.nox-mod-files { --mod: var(--mod-files); }

.nox-drive-crumb { font-size: 14px; margin: 2px 0 16px; color: var(--nox-muted); }
.nox-drive-crumb a { color: var(--nox-blue-ink); text-decoration: none; }
.nox-drive-crumb-sep { margin: 0 6px; color: var(--nox-line); }
.nox-drive-crumb-here { color: var(--nox-ink); font-weight: 600; }

.nox-drive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
}
.nox-drive-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	background: var(--nox-card);
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-r-md);
	box-shadow: var(--nox-e1);
	text-decoration: none;
	color: var(--nox-ink);
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.nox-drive-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--nox-e2);
	border-color: #CFE0F1;
}
.nox-drive-ico {
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 12px;
	background: var(--nox-pale);
	color: var(--nox-blue-ink);
}
.nox-drive-card.is-folder .nox-drive-ico { background: #FDF3D6; color: #B9840A; }
.nox-drive-name {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.nox-drive-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.nox-drive-badge {
	font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--nox-muted);
	background: var(--nox-surface-2);
	padding: 2px 7px; border-radius: 999px;
}
.nox-drive-size { font-size: 12px; color: var(--nox-muted); }

/* --- Preview page --- */
.nox-drive-view-head { align-items: center; gap: 14px; }
.nox-drive-view-actions { display: inline-flex; gap: 6px; }
.nox-drive-preview {
	background: var(--nox-card);
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-r-md);
	box-shadow: var(--nox-e1);
	padding: 14px;
	text-align: center;
}
.nox-drive-preview-img {
	max-width: 100%;
	max-height: 78vh;
	border-radius: 8px;
}
.nox-drive-preview-frame {
	width: 100%;
	height: 80vh;
	border: none;
	border-radius: 8px;
	background: #fff;
}
.nox-drive-preview-text { height: 60vh; }
.nox-drive-note { font-size: 12.5px; color: var(--nox-muted); margin: 10px 0 2px; }
.nox-drive-noprev { padding: 48px 16px; color: var(--nox-muted); }
.nox-drive-noprev p { margin-bottom: 16px; }
.nox-empty { color: var(--nox-muted); padding: 24px 0; }

/* =========================================================================
   v0.64.0 — Comment edit/delete + inline image attachments
   ========================================================================= */

/* --- Comment tools --- */
.nox-comment-edited { color: var(--nox-muted); font-size: 12px; }
.nox-comment-tombstone {
	color: var(--nox-muted);
	font-style: italic;
	font-size: 13.5px;
	margin: 2px 0 0;
}
.nox-comment.is-deleted .nox-comment-who { opacity: .7; }
.nox-comment-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 5px;
}
.nox-comment-tool {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nox-muted);
}
.nox-comment-tool:hover { color: var(--nox-blue-ink); }
.nox-comment-tool-danger:hover { color: #C0392B; }
.nox-comment-tool-sep { color: var(--nox-line); font-size: 12px; }
.nox-comment-edit-form { margin-top: 8px; }
.nox-comment-edit-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--nox-line);
	border-radius: 10px;
	padding: 9px 11px;
	font: inherit;
	resize: vertical;
}
.nox-comment-del-form { display: none; }

/* --- Inline image attachments --- */
.nox-file-row.is-image { align-items: center; }
.nox-file-thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--nox-line);
	background: var(--nox-surface-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.nox-file-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =========================================================================
   v0.65.0 — Google links in comments: clickable + preview cards
   ========================================================================= */
.nox-comment-text a { color: var(--nox-blue-ink); word-break: break-word; }
.nox-comment-text a:hover { text-decoration: underline; }

.nox-drive-embed {
	margin-top: 10px;
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-r-md);
	overflow: hidden;
	background: var(--nox-surface-2);
	max-width: 560px;
}
.nox-drive-embed-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
}
.nox-drive-embed-icon {
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px;
	background: var(--nox-pale);
	color: var(--nox-blue-ink);
	flex: 0 0 auto;
}
.nox-drive-embed-label { font-weight: 600; font-size: 13.5px; flex: 1; }
.nox-drive-embed-toggle {
	background: var(--nox-blue);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 5px 12px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.nox-drive-embed-toggle:hover { background: var(--nox-navy); }
.nox-drive-embed-open {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nox-muted);
	text-decoration: none;
	white-space: nowrap;
}
.nox-drive-embed-open:hover { color: var(--nox-blue-ink); }
.nox-drive-embed-frame { background: #fff; }
.nox-drive-embed-frame iframe {
	width: 100%;
	height: 420px;
	border: none;
	display: block;
}

/* =========================================================================
   v0.66.0 — Calendar (Google team calendar) read view
   ========================================================================= */
:root { --mod-calendar: #2F7D6B; }
.nox-mod-calendar { --mod: var(--mod-calendar); }

.nox-cal-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.nox-cal-day {
	display: flex;
	gap: 16px;
	background: var(--nox-card);
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-r-md);
	box-shadow: var(--nox-e1);
	padding: 14px 16px;
}
.nox-cal-daymark {
	flex: 0 0 58px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-right: 1px solid var(--nox-line);
	padding-right: 14px;
}
.nox-cal-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--nox-muted); }
.nox-cal-dnum { font-family: var(--nox-font-head); font-size: 24px; font-weight: 700; color: var(--nox-ink); line-height: 1.1; }
.nox-cal-mon { font-size: 11px; text-transform: uppercase; color: var(--nox-muted); }
.nox-cal-events { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.nox-cal-event {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 4px 0;
}
.nox-cal-event + .nox-cal-event { border-top: 1px solid var(--nox-line); padding-top: 10px; }
.nox-cal-time {
	flex: 0 0 66px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nox-muted);
}
.nox-cal-summary { flex: 1; font-size: 14px; font-weight: 600; }
.nox-cal-where { font-size: 12.5px; color: var(--nox-muted); }

/* =========================================================================
   v0.67.0 — Overdue task alerts
   ========================================================================= */
.nox-overdue { color: #B03A2E; font-weight: 600; }

/* Pill badge shown next to overdue task titles. */
.nox-overdue-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: #fff;
	background: #C0392B;
	padding: 2px 9px;
	border-radius: 999px;
	vertical-align: middle;
	white-space: nowrap;
}

/* Left-border accent on overdue rows (table) and cards (board). */
.nox-row-overdue > td:first-child { box-shadow: inset 3px 0 0 0 #C0392B; }
.nox-card-overdue {
	border-color: #F3C6C0 !important;
	box-shadow: inset 3px 0 0 0 #C0392B, var(--nox-e1);
}

/* Prominent banner on the task detail hero. */
.nox-overdue-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	padding: 9px 13px;
	background: #FCEBEA;
	border: 1px solid #F3C6C0;
	border-radius: 10px;
	color: #922B21;
	font-size: 13.5px;
	font-weight: 600;
}
.nox-overdue-banner svg { flex: 0 0 auto; color: #C0392B; }

/* =========================================================================
   v0.68.0 — Blocked tasks dashboard widget
   ========================================================================= */
.nox-blocked-card { border-color: #E7B4AC; background: #FCEEEC; }
.nox-blocked-card h2 { color: #9B3327; }
.nox-blocked-card .nox-count-badge { background: #C0392B; color: #fff; }

/* =========================================================================
   v0.70.0 — PTO balance styling
   ========================================================================= */
.nox-pto-balance {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin: 6px 0 14px;
	padding: 14px 18px;
	background: var(--nox-pale);
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-r-md);
}
.nox-pto-bal-fig { display: flex; align-items: baseline; gap: 8px; }
.nox-pto-bal-num {
	font-family: var(--nox-font-head);
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: var(--nox-blue-ink);
}
.nox-pto-bal-num.is-over { color: #C0392B; }
.nox-pto-bal-lbl { font-size: 13.5px; color: var(--nox-muted); font-weight: 600; }
.nox-pto-bal-meta { font-size: 13px; color: var(--nox-muted); }
.nox-pto-over { color: #C0392B; font-weight: 600; }

/* =========================================================================
   v0.71.0 — Manager PTO admin
   ========================================================================= */
.nox-pto-year-switch { display: inline-flex; gap: 6px; }
.nox-pto-table { width: 100%; }
.nox-pto-table th.nox-num, .nox-pto-table td.nox-num { text-align: right; white-space: nowrap; }
.nox-pto-table tr.is-open > td { background: var(--nox-pale); }
.nox-pto-def { color: var(--nox-muted); }
.nox-pto-detail-row > td { background: var(--nox-surface-2); padding: 0; }
.nox-pto-detail {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 18px;
	padding: 16px 18px;
}
@media (max-width: 720px) { .nox-pto-detail { grid-template-columns: 1fr; } }
.nox-pto-panel h3 { font-family: var(--nox-font-head); font-size: 14px; margin: 0 0 10px; }
.nox-pto-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.nox-pto-fld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--nox-muted); }
.nox-pto-fld-grow { flex: 1; min-width: 140px; }
.nox-pto-fld input {
	border: 1px solid var(--nox-line);
	border-radius: 9px;
	padding: 7px 10px;
	font: inherit;
	color: var(--nox-ink);
}
.nox-pto-inline-form .nox-field-hint { flex-basis: 100%; margin: 0; }
.nox-pto-adj-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nox-pto-adj-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--nox-line);
	font-size: 13px;
}
.nox-pto-adj-list li:last-child { border-bottom: 0; }
.nox-pto-adj-days { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 46px; }
.nox-pto-adj-days.is-debit { color: #B03A2E; }
.nox-pto-adj-days.is-credit { color: #1E8E4E; }
.nox-pto-adj-note { flex: 1; color: var(--nox-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-pto-adj-meta { color: var(--nox-muted); font-size: 12px; }
.nox-pto-adj-del { display: inline; margin: 0; }
.nox-pto-adj-x { background: none; border: none; color: var(--nox-muted); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.nox-pto-adj-x:hover { color: #C0392B; }

/* =========================================================================
   v0.72.0 — @mentions + comment reactions
   ========================================================================= */
.nox-mention {
	color: var(--nox-blue-ink);
	background: var(--nox-pale);
	border-radius: 5px;
	padding: 0 4px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.nox-mention:hover { background: #dCE9F8; }

/* Autocomplete dropdown (absolute-positioned on document.body). */
.nox-mention-menu {
	position: absolute;
	z-index: 1000;
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: 10px;
	box-shadow: var(--nox-e2);
	padding: 4px;
	max-height: 220px;
	overflow-y: auto;
}
.nox-mention-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-radius: 7px;
	padding: 7px 10px;
	font: inherit;
	font-size: 13.5px;
	color: var(--nox-ink);
	cursor: pointer;
	white-space: nowrap;
}
.nox-mention-item:hover, .nox-mention-item.is-active { background: var(--nox-pale); color: var(--nox-blue-ink); }

/* Like / dislike bar under a task comment. */
.nox-creact { display: inline-flex; gap: 6px; margin-top: 6px; }
.nox-creact-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: 1px solid var(--nox-line);
	border-radius: 999px;
	padding: 3px 10px;
	font: inherit;
	font-size: 12px;
	color: var(--nox-muted);
	cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}
.nox-creact-btn:hover { background: var(--nox-surface-2); color: var(--nox-ink); }
.nox-creact-btn.is-on { border-color: var(--nox-blue); color: var(--nox-blue-ink); background: var(--nox-pale); }
.nox-creact-btn[data-reaction="dislike"].is-on { border-color: #C0392B; color: #C0392B; background: #FCEBEA; }
.nox-creact-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.nox-creact-n:empty { display: none; }

/* =========================================================================
   v0.74.0 — Calendar overhaul (navigation, event-type icons, day view)
   ========================================================================= */
.nox-cal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.nox-cal-steppers { display: inline-flex; gap: 6px; }
.nox-cal-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--nox-line);
	border-radius: 9px;
	color: var(--nox-ink);
	text-decoration: none;
	font-size: 16px;
	line-height: 1;
	background: var(--nox-white);
}
.nox-cal-step:hover { background: var(--nox-pale); color: var(--nox-blue-ink); border-color: var(--nox-blue); }
.nox-cal-jump { display: inline-flex; gap: 8px; align-items: center; }
.nox-cal-jump select {
	border: 1px solid var(--nox-line);
	border-radius: 9px;
	padding: 7px 10px;
	font: inherit;
	font-weight: 600;
	color: var(--nox-ink);
	background: var(--nox-white);
}
.nox-cal-today { margin-left: 2px; }

/* Day-number becomes a link to the day view. */
a.nox-cal-daynum { text-decoration: none; color: var(--nox-muted); display: inline-block; }
a.nox-cal-daynum:hover { color: var(--nox-blue-ink); }

/* Event pill with a type icon + coloured left accent (var --ev per type). */
.nox-cal-event {
	display: flex;
	align-items: center;
	gap: 4px;
	border-left: 3px solid var(--ev, var(--nox-blue));
	background: color-mix(in srgb, var(--ev, var(--nox-blue)) 10%, transparent);
	color: var(--nox-ink);
}
.nox-cal-event .nox-ev-ico { color: var(--ev, var(--nox-blue)); flex: 0 0 auto; }
.nox-cal-event-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-cal-event.is-cancelled { opacity: .55; text-decoration: line-through; }

/* Type badge on list rows. */
.nox-ev-badge { display: inline-flex; vertical-align: middle; margin-right: 4px; }
.nox-ev-badge .nox-ev-ico { display: block; }

/* Single-day agenda panel. */
.nox-day-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nox-day-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 6px;
	border-bottom: 1px solid var(--nox-line);
}
.nox-day-item:last-child { border-bottom: 0; }
.nox-day-ico { display: inline-flex; flex: 0 0 auto; }
.nox-day-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.nox-day-title { font-weight: 600; color: var(--nox-ink); }
.nox-day-meta { font-size: 12.5px; color: var(--nox-muted); }

/* =========================================================================
   v0.74.1 — Calendar nav + button fixes
   Fix: `.nox-btn-small.nox-btn-quiet` and `.nox-btn-small.nox-menu-danger`
   previously rendered menu-style TEXT colours over the small-button gradient
   (grey/red text on blue — unreadable). Turn those combinations into proper
   ghost / outline buttons. Also refine the calendar navigation bar.
   ========================================================================= */

/* Ghost small-button: transparent surface, clear border, readable ink. */
.nox-btn-small.nox-btn-quiet {
	background: var(--nox-card) !important;
	background-image: none !important;
	color: var(--nox-blue-ink) !important;
	border: 1px solid var(--nox-line) !important;
	box-shadow: none !important;
	font-weight: 600;
}
.nox-btn-small.nox-btn-quiet:hover {
	background: var(--nox-pale) !important;
	border-color: var(--nox-blue) !important;
	filter: none !important;
}

/* Danger small-button: white surface, red text + border (reads clearly). */
.nox-btn-small.nox-menu-danger {
	background: var(--nox-card) !important;
	background-image: none !important;
	color: #B4232A !important;
	border: 1px solid #F0C9C9 !important;
	box-shadow: none !important;
	font-weight: 600;
}
.nox-btn-small.nox-menu-danger:hover {
	background: #FCEBEA !important;
	border-color: #B4232A !important;
	filter: none !important;
}

/* Event tools spacing on the list rows. */
.nox-event-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.nox-event-tools form { margin: 0; }

/* --- Calendar navigation bar --- */
.nox-cal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.nox-cal-steppers { display: inline-flex; gap: 6px; }
.nox-cal-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	min-width: 36px;
	padding: 0 10px;
	border: 1px solid var(--nox-line);
	border-radius: 10px;
	background: var(--nox-white);
	color: var(--nox-ink);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	box-shadow: none;
	transition: background .12s, border-color .12s, color .12s;
}
.nox-cal-step:hover { background: var(--nox-pale); border-color: var(--nox-blue); color: var(--nox-blue-ink); filter: none; }
/* "Today" pill sits with the steppers but reads as the primary jump-back. */
.nox-cal-today {
	background: var(--nox-pale);
	border-color: transparent;
	color: var(--nox-blue-ink);
	font-family: var(--nox-font-head);
	padding: 0 14px;
}
.nox-cal-today:hover { background: var(--nox-blue); border-color: var(--nox-blue); color: var(--nox-white); }

/* Month / year jump selects. */
.nox-cal-jump { display: inline-flex; gap: 8px; align-items: center; }
.nox-cal-jump select {
	appearance: none;
	-webkit-appearance: none;
	height: 36px;
	border: 1px solid var(--nox-line);
	border-radius: 10px;
	padding: 0 30px 0 12px;
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 14px;
	color: var(--nox-ink);
	background-color: var(--nox-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B7286' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	cursor: pointer;
}
.nox-cal-jump select:hover { border-color: var(--nox-blue); }
.nox-cal-jump select:focus { outline: none; border-color: var(--nox-blue); box-shadow: 0 0 0 3px var(--nox-pale); }
.nox-cal-go {
	height: 36px; border: 0; border-radius: 10px; padding: 0 14px;
	background: var(--nox-blue); color: var(--nox-white);
	font-family: var(--nox-font-head); font-weight: 700; cursor: pointer;
}

/* =====================================================================
 * v0.75.0 — Project numbering & priority, project feed, "Tasks with…"
 * widget. Appended last so it wins at equal specificity (house rule).
 * ================================================================== */

/* Project number chip — monospace-feel tag, quiet steel blue. */
.nox-pnum {
	display: inline-flex; align-items: center;
	padding: 2px 9px; border-radius: 8px;
	background: #EAF1F8; color: #2E6EA6;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 0.72em; letter-spacing: 0.04em;
	border: 1px solid #D5E3F0;
	white-space: nowrap;
}
h1 .nox-pnum { font-size: 15px; padding: 3px 10px; position: relative; top: -1px; }

/* Project priority chips — Low / Medium / High / Critical. */
.nox-pprio {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 2px 10px; border-radius: 999px;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase;
	white-space: nowrap;
}
.nox-pprio::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: currentColor; opacity: 0.85;
}
.nox-pprio-low      { background: #EEF2F6; color: #5B7286; }
.nox-pprio-medium   { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-pprio-high     { background: #FFF3E2; color: #B26A00; }
.nox-pprio-critical { background: #FBEAEA; color: #B03A2E; }
h1 .nox-pprio { font-size: 12px; position: relative; top: -1px; }

/* Project health chips — the owner's reading, next to the priority. */
.nox-phealth {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 2px 10px; border-radius: 999px;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase;
	white-space: nowrap;
}
.nox-phealth::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: currentColor; opacity: 0.85;
}
.nox-phealth-on_track  { background: #E7F6EE; color: #1B7A45; }
.nox-phealth-at_risk   { background: #FFF3E2; color: #B26A00; }
.nox-phealth-off_track { background: #FBEAEA; color: #B03A2E; }
h1 .nox-phealth { font-size: 12px; position: relative; top: -1px; }

/* Completion bar on a project card. */
.nox-pprog { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.nox-pprog-bar {
	flex: 1 1 auto; height: 6px; border-radius: 999px;
	background: #E1E8EF; overflow: hidden;
}
.nox-pprog-fill { display: block; height: 100%; background: var(--nox-teal, #1B9C8F); border-radius: 999px; }
.nox-pprog-pct {
	flex: 0 0 auto; font-family: var(--nox-font-head); font-weight: 700;
	font-size: 12px; color: var(--nox-muted, #5B7286);
}

/* Due-date line under a card's counters. */
.nox-pcard-due {
	margin: 10px 0 0; font-size: 12.5px; font-weight: 600;
	color: var(--nox-muted, #5B7286);
}

/* Progress update panel on the project page. */
.nox-pnote-body { margin: 4px 0 8px; font-size: 15px; line-height: 1.55; }
.nox-pnote-meta {
	margin: 0; font-size: 12.5px; color: var(--nox-muted, #5B7286);
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.nox-pnote-form { margin-top: 14px; }
.nox-ptransfer { margin-top: 16px; }
.nox-ptransfer > summary {
	cursor: pointer; font-family: var(--nox-font-head); font-weight: 700;
	font-size: 13px; color: var(--nox-muted, #5B7286);
}
.nox-ptransfer > summary:hover { color: var(--nox-ink); }

/* Section headings inside a project's task list. */
.nox-section-row > td {
	background: var(--nox-pale, #EEF4FA);
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--nox-blue-ink, #0A1F3C);
	padding-top: 10px; padding-bottom: 10px;
}

/* Section management list on the project page. */
.nox-psection-list { list-style: none; margin: 0 0 14px; padding: 0; }
.nox-psection {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 0; border-bottom: 1px solid var(--nox-line, #E1E8EF);
}
.nox-psection:last-child { border-bottom: 0; }
.nox-psection-rename { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; margin: 0; }
.nox-psection-rename input[type="text"] { margin: 0; max-width: 320px; }
.nox-psection-name { flex: 1 1 auto; font-weight: 600; }

/* Project tags — chips on a card, and the filter row above the wall. */
.nox-ptags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.nox-ptag {
	padding: 2px 8px; border-radius: 999px;
	background: #EEF2F6; color: #5B7286;
	font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.nox-ptagfilter { margin-bottom: 16px; }

/* Project cards — top row holds the number + priority. */
.nox-pcard-top {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; margin: 0 0 10px;
}

/* Project feed section — breathing room between the page and the stream. */
.nox-project-feed { margin-top: 18px; }
.nox-project-feed > h2 { margin: 0 0 14px; }
.nox-project-feed .nox-composer { box-shadow: none; border: 1px solid var(--nox-line); }
.nox-project-feed .nox-post { box-shadow: none; border: 1px solid var(--nox-line); }

/* "Tasks with…" widget — person header + 3-part rows. */
.nox-w-person {
	display: flex; align-items: center;
	margin: 0 0 10px; padding: 0 0 10px;
	border-bottom: 1px solid var(--nox-line);
}
.nox-w-taskswith .nox-w-li {
	display: flex; align-items: center; gap: 10px;
}
.nox-w-taskswith .nox-w-li-main { flex: 1 1 auto; min-width: 0; }
.nox-w-li-link {
	color: var(--nox-ink); text-decoration: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	display: block;
}
.nox-w-li-link:hover { color: var(--nox-blue-ink); text-decoration: underline; }
.nox-w-taskswith .nox-badge { flex: 0 0 auto; }
.nox-w-taskswith .nox-w-li-tag { flex: 0 0 auto; }

/* =====================================================================
 * v0.76.0 — Currency & BTC widget (rates + inline converter).
 * ================================================================== */
.nox-fx-rows { margin: 0 0 12px; }
.nox-fx-rows .nox-w-li { display: flex; align-items: center; justify-content: space-between; }
.nox-fx-pair {
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 12.5px; letter-spacing: 0.04em; color: var(--nox-muted);
}
.nox-fx-val {
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 15px; color: var(--nox-navy-ink);
	font-variant-numeric: tabular-nums;
}
.nox-fx-conv {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 10px; border: 1px solid var(--nox-line); border-radius: 12px;
	background: #FAFCFE;
}
.nox-fx-conv .nox-fx-amount {
	width: 84px; height: 34px; border: 1px solid var(--nox-line);
	border-radius: 9px; padding: 0 10px; font: 600 13.5px var(--nox-font-body, Arial);
	color: var(--nox-ink); background: var(--nox-white);
}
.nox-fx-conv select {
	height: 34px; border: 1px solid var(--nox-line); border-radius: 9px;
	padding: 0 6px; font: 600 12.5px var(--nox-font-body, Arial);
	color: var(--nox-ink); background: var(--nox-white);
}
.nox-fx-arrow { color: var(--nox-muted); font-weight: 700; }
.nox-fx-result {
	margin-left: auto; font-family: var(--nox-font-head);
	font-weight: 800; font-size: 15px; color: var(--nox-blue-ink);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nox-fx-meta { margin: 10px 0 0; font-size: 11.5px; color: var(--nox-muted); }

/* =====================================================================
 * v0.77.0 — World clocks: header strip with attendance state + widget.
 * ================================================================== */

/* Header strip — main clock + up to 2 small extra clocks. */
.nox-clock-strip {
	display: inline-flex; align-items: center; gap: 12px;
	margin-right: 6px;
}
.nox-clock {
	display: inline-flex; align-items: baseline; gap: 7px;
	white-space: nowrap;
}
.nox-clock-city {
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}
.nox-clock-time {
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 15px; color: var(--nox-white);
	font-variant-numeric: tabular-nums;
}
.nox-clock-sm .nox-clock-city { font-size: 10px; color: rgba(255, 255, 255, 0.45); }
.nox-clock-sm .nox-clock-time { font-size: 12.5px; color: rgba(255, 255, 255, 0.78); }

/* Main clock carries the attendance pill. */
.nox-clock-main { display: inline-flex; align-items: center; gap: 9px; }
.nox-att-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 10px; border-radius: 999px;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
	background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.85);
}
.nox-att-dot { width: 7px; height: 7px; border-radius: 50%; background: #8FA3B5; }
.nox-att-working .nox-att-dot { background: #35D07F; box-shadow: 0 0 0 3px rgba(53, 208, 127, 0.22); }
.nox-att-working .nox-att-pill { color: #C9F5DF; }
.nox-att-break .nox-att-dot { background: #FFC24B; box-shadow: 0 0 0 3px rgba(255, 194, 75, 0.22); }
.nox-att-break .nox-att-pill { color: #FFE9C2; }
.nox-att-off .nox-att-dot { background: #8FA3B5; }

/* Header space: extras go first to shrink, then the whole strip. */
@media ( max-width: 1080px ) { .nox-clock-sm { display: none; } }
@media ( max-width: 760px ) { .nox-clock-strip .nox-clock-city { display: none; } }
@media ( max-width: 560px ) { .nox-clock-strip { display: none; } }

/* World-clocks widget — one card per city. */
.nox-wclocks {
	display: grid; grid-template-columns: repeat( auto-fit, minmax( 128px, 1fr ) );
	gap: 10px;
}
.nox-wclock-card {
	display: flex; flex-direction: column; gap: 2px;
	padding: 12px 14px; border: 1px solid var(--nox-line);
	border-radius: 12px; background: #FAFCFE;
}
.nox-wclock-card .nox-clock { flex-direction: column; align-items: flex-start; gap: 2px; }
.nox-wclock-card .nox-clock-city {
	color: var(--nox-muted); font-size: 11px;
	letter-spacing: 0.05em; text-transform: uppercase;
	font-family: var(--nox-font-head); font-weight: 700;
}
.nox-wclock-card .nox-clock-time {
	color: var(--nox-navy-ink); font-size: 21px;
	font-family: var(--nox-font-head); font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.nox-wclock-card .nox-clock-off {
	color: var(--nox-bright); font-size: 10.5px;
	font-family: var(--nox-font-head); font-weight: 700;
}
.nox-wclock-date { color: var(--nox-muted); font-size: 11.5px; }

/* =====================================================================
 * v0.78.0 — Quality: product-line grouping (CARD → STROOM MASTER).
 * ================================================================== */
.nox-qc-line-h {
	display: flex; align-items: center; gap: 10px;
	margin: 22px 0 10px;
	font-family: var(--nox-font-head); font-weight: 800;
	font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase;
	color: var(--nox-muted);
}
.nox-qc-line-h::after {
	content: ""; flex: 1 1 auto; height: 1px;
	background: var(--nox-line);
}
.nox-qc-line-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 20px; padding: 0 7px;
	border-radius: 999px; background: #FFF3E2; color: #B26A00;
	font-size: 11px; font-weight: 800;
}
.nox-qc-line-grid { margin: 0 0 6px; }
.nox-qc-line-chip {
	display: inline-flex; align-items: center;
	padding: 3px 11px; border-radius: 999px;
	background: #FFF3E2; color: #B26A00;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
	position: relative; top: -2px;
}

/* =====================================================================
 * v0.78.1 — SKU colour variants (Blue Original / Supernova / White).
 * ================================================================== */
.nox-qc-variant {
	display: inline-flex; align-items: center; gap: 5px;
	margin-left: 6px; padding: 1px 9px; border-radius: 999px;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
	position: relative; top: -1px;
}
.nox-qc-variant::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: currentColor; opacity: 0.85;
}
.nox-qc-variant-blue      { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-qc-variant-supernova { background: #F1EBFB; color: #7A5AC2; }
.nox-qc-variant-white     { background: #F2F5F8; color: #5B7286; border: 1px solid var(--nox-line); }
.nox-qc-variant-other     { background: #EEF2F6; color: #5B7286; }

/* =====================================================================
 * v0.80.0 — Equipment: registry cards, routines + checklists, tickets.
 * ================================================================== */
.nox-mod-equipment { --nox-mod: #6B7F93; }

.nox-eq-grid { align-items: stretch; }
.nox-eq-card h2 { margin: 0 0 2px; }

.nox-eq-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nox-eq-badge {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 2px 10px; border-radius: 999px;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
}
.nox-eq-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nox-eq-badge-ok    { background: #E4F7EE; color: #1B7F4D; }
.nox-eq-badge-warn  { background: #FFF3E2; color: #B26A00; }
.nox-eq-badge-alert { background: #FDEBEA; color: #C0392B; }

.nox-eq-subh {
	margin: 16px 0 6px;
	font-family: var(--nox-font-head); font-weight: 800;
	font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--nox-muted);
}
.nox-eq-contacts { margin: 0; color: var(--nox-ink); line-height: 1.55; }

/* Routines */
.nox-eq-routine { margin-bottom: 12px; }
.nox-eq-routine-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nox-eq-routine-head h3 { display: flex; align-items: center; gap: 9px; margin: 0; flex-wrap: wrap; }
.nox-eq-routine-meta { color: var(--nox-muted); font-size: 12.5px; }
.nox-eq-freq {
	display: inline-flex; padding: 2px 9px; border-radius: 999px;
	background: #EDF2F7; color: #4A6076;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
}
.nox-eq-checklist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.nox-eq-checklist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nox-eq-log-form { margin-top: 4px; }
.nox-eq-log-foot { display: flex; gap: 8px; margin-top: 12px; }
.nox-eq-log-foot input[type="text"] { flex: 1 1 auto; }
.nox-eq-items-manage { margin-top: 12px; border-top: 1px dashed var(--nox-line); padding-top: 10px; }
.nox-eq-items-manage summary { cursor: pointer; color: var(--nox-muted); font-size: 12.5px; font-weight: 700; }
.nox-eq-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--nox-line); }
.nox-eq-item-row:last-of-type { border-bottom: 0; }
.nox-eq-item-add { display: flex; gap: 8px; margin-top: 8px; }
.nox-eq-item-add input[type="text"] { flex: 1 1 auto; }
.nox-eq-routine-new { padding: 12px 16px; }
.nox-eq-routine-new-form { display: flex; gap: 8px; flex-wrap: wrap; }
.nox-eq-routine-new-form input[type="text"] { flex: 1 1 240px; }

/* Tickets */
.nox-eq-ticket { margin-bottom: 10px; }
.nox-eq-ticket-new { margin-bottom: 12px; }
.nox-eq-ticket-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nox-eq-ticket-meta { margin: 4px 0 0; color: var(--nox-muted); font-size: 12.5px; }
.nox-eq-ticket-desc { margin: 8px 0 0; color: var(--nox-ink); }
.nox-eq-ticket-res  { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #F2FBF6; color: #1B7F4D; }
.nox-eq-ticket-manage { margin-top: 10px; }
.nox-eq-ticket-manage summary { cursor: pointer; color: var(--nox-blue-ink); font-weight: 700; font-size: 13px; }
.nox-eq-ticket-form { margin-top: 10px; }
.nox-eq-tstatus-open        { background: #FDEBEA; color: #C0392B; }
.nox-eq-tstatus-in_progress { background: #FFF3E2; color: #B26A00; }
.nox-eq-tstatus-closed      { background: #E4F7EE; color: #1B7F4D; }

/* =====================================================================
 * v0.81.0 — Production pipeline: stages, queues, QC processes.
 * ================================================================== */
.nox-qc-pipeline { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.nox-qc-stages { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nox-qc-stage {
	display: inline-flex; align-items: center;
	padding: 4px 13px; border-radius: 999px;
	background: #EEF2F6; color: var(--nox-muted);
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
}
.nox-qc-stage.is-past { background: #E4F7EE; color: #1B7F4D; }
.nox-qc-stage.is-current { background: var(--nox-blue); color: #fff; box-shadow: 0 2px 8px rgba(21, 84, 160, 0.30); }
.nox-qc-stage-arrow { color: var(--nox-line); font-weight: 700; }

.nox-qc-queues { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 6px; }
@media ( max-width: 760px ) { .nox-qc-queues { grid-template-columns: 1fr; } }
.nox-qc-queue-h {
	display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
	font-family: var(--nox-font-head); font-weight: 800;
	font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--nox-muted);
}
.nox-qc-queue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.nox-qc-queue-list li { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }

.nox-qc-proc {
	display: inline-flex; padding: 1px 9px; border-radius: 999px;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
}
.nox-qc-proc-print  { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-qc-proc-gluing { background: #FFF3E2; color: #B26A00; }

.nox-qc-pipe-config { border: 1px solid var(--nox-line); border-radius: 12px; padding: 12px 14px; margin: 14px 0 0; display: grid; gap: 8px; }
.nox-qc-pipe-config legend {
	padding: 0 6px; font-family: var(--nox-font-head); font-weight: 800;
	font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--nox-muted);
}

/* =====================================================================
 * v0.82.0 — Rework (back to sanding) + gluing defect chips.
 * ================================================================== */
.nox-qc-rework-chip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 2px 10px; border-radius: 999px;
	background: #FFF3E2; color: #B26A00;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
}
.nox-qc-rework-chip::before { content: "↺"; font-size: 12px; }
.nox-btn-warn {
	background: #FFF3E2; color: #B26A00; border: 0;
	border-radius: 10px; padding: 8px 16px; cursor: pointer;
	font-family: var(--nox-font-head); font-weight: 700; font-size: 12.5px;
}
.nox-btn-warn:hover { background: #FFE9C9; }

/* =====================================================================
 * v0.83.0 — Stock traffic lights + production plan.
 * ================================================================== */
.nox-stock-st-warn  { color: #B26A00 !important; font-weight: 800; }
.nox-stock-st-alert { color: #C0392B !important; font-weight: 800; }
.nox-stock-dot {
	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	margin-left: 6px; background: currentColor; vertical-align: 1px;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}
.nox-stock-chip {
	display: inline-flex; align-items: center; gap: 5px;
	margin-left: 8px; padding: 1px 9px; border-radius: 999px;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
}
.nox-stock-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nox-stock-chip.nox-stock-st-warn  { background: #FFF3E2; color: #B26A00; }
.nox-stock-chip.nox-stock-st-alert { background: #FDEBEA; color: #C0392B; }

.nox-plan-table tbody tr.nox-plan-row-alert { background: #FFF7F6; }
.nox-plan-table tbody tr.nox-plan-row-warn  { background: #FFFBF4; }
.nox-plan-table tfoot td { border-top: 2px solid var(--nox-line); padding-top: 10px; }
.nox-stock-num { font-weight: 800; }

/* =====================================================================
 * v0.84.0 — Customer Service: tickets, location-first, escalation.
 * ================================================================== */
.nox-mod-cs { --nox-mod: #C2568C; }

.nox-cs-views { display: flex; gap: 8px; margin: 0 0 14px; }
.nox-cs-view-chip {
	display: inline-flex; padding: 6px 15px; border-radius: 999px;
	background: #EDF2F7; color: var(--nox-muted); text-decoration: none;
	font-family: var(--nox-font-head); font-weight: 700; font-size: 12px;
}
.nox-cs-view-chip.is-active { background: #C2568C; color: #fff; box-shadow: 0 2px 8px rgba(194, 86, 140, 0.30); }

.nox-cs-table td { vertical-align: middle; }
.nox-cs-row-escalated { background: #FDF3F8; }

/* Location — the field that must never be missing. */
.nox-cs-location {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 800; color: var(--nox-navy-ink); font-size: 13.5px;
}
.nox-cs-pin { width: 9px; height: 9px; border-radius: 50% 50% 50% 0; background: #C2568C; transform: rotate(-45deg); }
.nox-cs-location-missing { color: #C0392B; font-weight: 800; }
.nox-cs-location-hero { font-size: 16px; margin: 2px 0 12px; }

.nox-cs-subject-line { margin: 0 0 8px; color: var(--nox-ink); font-size: 14.5px; font-weight: 600; }

.nox-cs-method {
	display: inline-flex; padding: 2px 10px; border-radius: 999px;
	background: #EEF2F6; color: #4A6076;
	font-family: var(--nox-font-head); font-weight: 700;
	font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
}
.nox-cs-method-whatsapp  { background: #E4F7EE; color: #1B7F4D; }
.nox-cs-method-email     { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-cs-method-phone     { background: #EDF2F7; color: #4A6076; }
.nox-cs-method-instagram { background: #FBEAF3; color: #C2568C; }
.nox-cs-method-store     { background: #FFF3E2; color: #B26A00; }

.nox-cs-status-open        { background: #FDEBEA; color: #C0392B; }
.nox-cs-status-in_progress { background: #FFF3E2; color: #B26A00; }
.nox-cs-status-closed      { background: #E4F7EE; color: #1B7F4D; }
.nox-cs-status-waiting     { background: #FFF4E0; color: #A96A00; }

/* Ticket files */
.nox-cs-files { display: flex; flex-direction: column; gap: 12px; }
.nox-cs-filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nox-cs-file {
	display: flex; align-items: center; gap: 10px;
	padding: 8px; border: 1px solid var(--nox-line); border-radius: 10px;
}
.nox-cs-file > a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--nox-ink); flex: 1 1 auto; min-width: 0; }
.nox-cs-file > a:hover .nox-cs-filename { text-decoration: underline; }
.nox-cs-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.nox-cs-fileicon { font-size: 26px; width: 46px; text-align: center; flex: 0 0 auto; }
.nox-cs-filename { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-cs-filemeta { font-size: 12px; color: var(--nox-muted); white-space: nowrap; }
.nox-cs-attachform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* "Sent to the customer" marker on the composer. Sits on .nox-check-inline,
   which already handles layout — this only adds the emphasis. */
.nox-cs-toclient { margin-top: 8px; font-weight: 600; }

/* Ticket reference and subject in the list — the subject gets its own line
   instead of trailing after the customer's name and competing with it. */
.nox-cs-customer { display: inline-flex; align-items: baseline; gap: 8px; }
.nox-cs-ref {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px; letter-spacing: -0.02em;
	color: var(--nox-muted); background: var(--nox-pale);
	padding: 1px 6px; border-radius: 5px; flex: 0 0 auto;
}
.nox-cs-subject {
	display: block; margin-top: 3px; font-size: 12.5px;
	color: var(--nox-muted); line-height: 1.4;
	max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Service-level state. Only ever shown when something needs attention, so it
   keeps its weight — a badge on every row is a badge nobody reads. */
.nox-cs-sla {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 2px 8px; border-radius: 999px;
	font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.nox-cs-sla::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nox-cs-sla-overdue { background: #FDEBEA; color: #C0392B; }
.nox-cs-sla-stale   { background: #FFF4E0; color: #A96A00; }
.nox-cs-sla-waiting { background: #EEF2F6; color: #5B7286; }
.nox-cs-sla-ok      { background: #EEF2F6; color: #5B7286; }

/* Template picker above the composer. */
.nox-cs-tplpick { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.nox-cs-tplpick label { margin: 0; font-size: 12.5px; color: var(--nox-muted); }
.nox-cs-tplpick select { max-width: 320px; }
.nox-cs-tpl { position: relative; }

/* The browser's own file input never matches anything around it. */
.nox-cs-attachform input[type="file"] {
	flex: 1 1 220px; min-width: 0; padding: 8px 10px;
	border: 1px dashed var(--nox-line); border-radius: 10px;
	background: var(--nox-pale); font: inherit; font-size: 13px;
	color: var(--nox-muted); cursor: pointer;
}
.nox-cs-attachform input[type="file"]:hover { border-color: var(--mod-cs, var(--nox-blue)); }
.nox-cs-attachform input[type="file"]::file-selector-button {
	margin-right: 10px; padding: 5px 12px; cursor: pointer;
	border: 1px solid var(--nox-line); border-radius: 8px;
	background: var(--nox-white); font: inherit; font-size: 12.5px; font-weight: 600;
	color: var(--nox-ink);
}
.nox-cs-attachform input[type="file"]::file-selector-button:hover { background: var(--nox-pale); }
.nox-cs-escalated {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 2px 10px; border-radius: 999px; margin-left: 4px;
	background: #C2568C; color: #fff;
	font-family: var(--nox-font-head); font-weight: 800;
	font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
}
.nox-cs-escalated::before { content: "!"; font-size: 12px; }

/* ===================================================================
 * Section dashboards (v0.85.0) — Quality / Inventory / Customer Service.
 * Appended layer: reuses the Sales filter + chart card language; only the
 * shared filter-bar shell and tab spacing are new.
 * ================================================================ */
.nox-secdash-tabs { margin-bottom: 14px; }
.nox-secdash-filters { padding: 16px 18px 14px; }
.nox-secdash-filters .nox-filter-tabs { margin-bottom: 14px; }
.nox-secdash-filters .nox-filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nox-secdash-filters .nox-fld-actions { display: flex; align-items: end; gap: 10px; }
.nox-secdash-filters .nox-fld-actions .nox-btn-small { white-space: nowrap; }
@media ( max-width: 1100px ) {
	.nox-secdash-filters .nox-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media ( max-width: 700px ) {
	.nox-secdash-filters .nox-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================================
 * Section dashboards v2 (v0.86.0) — Mapal-style parametrization.
 * The always-visible filter card is gone; a quiet toolbar (summary +
 * two round icon buttons) opens right-hand side panels: Parameters
 * (Accept/Cancel) and Scenarios (apply / save / delete). Appended
 * layer: wins by cascade order.
 * ================================================================ */
.nox-secdash-filters { display: none; } /* retire the v0.85.0 inline card */

.nox-sd-bar {
	display: flex; align-items: center; justify-content: flex-end;
	gap: 12px; margin: -4px 0 14px;
}
.nox-sd-summary { font-size: 12.5px; color: var(--nox-muted); font-weight: 600; }
.nox-sd-actions { display: flex; gap: 8px; }
.nox-sd-btn {
	position: relative;
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--nox-line); background: var(--nox-white);
	color: var(--nox-navy-ink); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 1px 2px rgba(10,31,60,0.06);
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.nox-sd-btn:hover { background: var(--nox-pale); box-shadow: 0 3px 8px rgba(10,31,60,0.10); transform: translateY(-1px); }
.nox-sd-btn.is-tuned::after {
	content: ""; position: absolute; top: 6px; right: 6px;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--nox-bright); border: 2px solid var(--nox-white);
}
.nox-sd-count {
	position: absolute; top: -4px; right: -4px;
	min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
	background: var(--nox-blue); color: #fff;
	font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* Side panels */
.nox-spanel-backdrop {
	position: fixed; inset: 0; background: rgba(10,31,60,0.32);
	opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 220;
}
body.nox-spanel-open .nox-spanel-backdrop { opacity: 1; pointer-events: auto; }
.nox-spanel {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: min(400px, 92vw);
	background: var(--nox-white);
	box-shadow: -12px 0 32px rgba(10,31,60,0.16);
	transform: translateX(105%); transition: transform 0.22s ease;
	z-index: 230; display: flex; flex-direction: column;
}
.nox-spanel.is-open { transform: translateX(0); }
.nox-spanel-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 22px 14px; border-bottom: 1px solid var(--nox-line);
}
.nox-spanel-head h2 { margin: 0; font-size: 19px; color: var(--nox-navy-ink); }
.nox-spanel-x {
	border: 0; background: none; cursor: pointer;
	font-size: 16px; color: var(--nox-muted); padding: 6px; line-height: 1;
}
.nox-spanel-x:hover { color: var(--nox-navy-ink); }
.nox-spanel-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.nox-spanel-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px; }
.nox-spanel-sec {
	margin: 18px 0 10px; font-size: 12px; font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--nox-muted);
}
.nox-spanel-sec:first-child { margin-top: 0; }
.nox-spanel-chips { margin-bottom: 12px; flex-wrap: wrap; }
.nox-spanel-chips button {
	border: 1px solid var(--nox-line); background: var(--nox-white);
	border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px;
	font-weight: 600; color: var(--nox-ink); cursor: pointer;
}
.nox-spanel-chips button.is-active { background: var(--nox-navy); border-color: var(--nox-navy); color: #fff; }
.nox-spanel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.nox-spanel-stack { display: flex; flex-direction: column; gap: 12px; }
.nox-spanel-foot {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 22px; border-top: 1px solid var(--nox-line);
	background: var(--nox-white);
}
.nox-spanel-foot-gap { flex: 1 1 auto; }

/* Scenarios */
.nox-scen-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nox-scen-row {
	display: flex; align-items: center; gap: 8px;
	border: 1px solid var(--nox-line); border-radius: 10px; padding: 4px 6px 4px 12px;
	transition: background 0.12s ease;
}
.nox-scen-row:hover { background: var(--nox-pale); }
.nox-scen-apply { flex: 1 1 auto; font-weight: 600; color: var(--nox-navy-ink); text-decoration: none; padding: 7px 0; }
.nox-scen-del { margin: 0; }
.nox-scen-del-btn {
	border: 0; background: none; cursor: pointer; color: var(--nox-muted);
	font-size: 12px; padding: 6px 8px; border-radius: 6px;
}
.nox-scen-del-btn:hover { color: #B03A2E; background: rgba(176,58,46,0.08); }
.nox-scen-save { display: flex; flex-direction: column; gap: 12px; }
.nox-scen-save-btn { align-self: flex-start; }

/* Equipment dashboard alert badges */
.nox-eq-alert-over, .nox-eq-alert-soon {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.nox-eq-alert-over { background: rgba(176,58,46,0.12); color: #B03A2E; }
.nox-eq-alert-soon { background: rgba(192,138,0,0.14); color: #8A5A00; }

/* ===================================================================
 * Desktop notifications opt-in (v0.87.0)
 * ================================================================ */
.nox-notify-optin-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nox-notify-optin-row h2 { margin: 0 0 4px; }
.nox-notify-optin-row p { margin: 0; }

/* ===================================================================
 * Sales toolbar + panels (v0.88.0) — the Sales view joins the subtle
 * Mapal-style parametrization. Small extras over the shared panel CSS.
 * ================================================================ */
.nox-scen-row.is-current { border-color: var(--nox-blue); background: var(--nox-pale); }
.nox-scn-more { border: 1px solid var(--nox-line); border-radius: 10px; padding: 8px 12px; margin: 4px 0; }
.nox-scn-more summary { cursor: pointer; font-weight: 600; color: var(--nox-navy-ink); font-size: 13.5px; }
.nox-scn-more .nox-scn-charts { margin-top: 10px; }
.nox-scen-del-row { margin-top: 8px; }
.nox-spanel-exports { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ===================================================================
 * Sales — Orders tab (v0.89.0)
 * ================================================================ */
.nox-orders-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.nox-orders-head h2 { margin: 0; }
.nox-orders-table td { vertical-align: middle; }
.nox-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.nox-order-toggle {
	border: 0; background: none; cursor: pointer; color: var(--nox-muted);
	font-size: 12px; padding: 2px 8px 2px 0; line-height: 1;
}
.nox-order-toggle:hover { color: var(--nox-navy-ink); }
.nox-order-lines td { background: var(--nox-pale); border-top: 0; }
.nox-order-items { list-style: none; margin: 0; padding: 4px 0 4px 26px; display: flex; flex-direction: column; gap: 4px; }
.nox-order-items .nox-muted { font-size: 12px; margin-left: 6px; }
.nox-order-qty { font-weight: 700; color: var(--nox-blue-ink); }
.nox-orders-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }

/* ===================================================================
 * Header quick punch (v0.91.0) — clock in / break / out from any page.
 * Compact pills next to the attendance state; primary action colored,
 * secondary quiet.
 * ================================================================ */
.nox-att-quick { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.nox-att-quick-form { margin: 0; display: inline-flex; }
.nox-att-quick-btn {
	border: 1px solid transparent; border-radius: 999px;
	padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 700;
	line-height: 1.2; cursor: pointer; white-space: nowrap;
	transition: filter 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.nox-att-quick-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.nox-att-q-in { background: #1E9E5A; color: #fff; }
.nox-att-q-break { background: rgba(192,138,0,0.16); color: #FFD98A; border-color: rgba(255,217,138,0.45); }
.nox-att-q-out { background: rgba(255,255,255,0.10); color: #E8F2FB; border-color: rgba(232,242,251,0.35); }
.nox-att-q-out:hover { background: rgba(226,104,60,0.85); border-color: transparent; }
@media (max-width: 900px) {
	.nox-att-quick { display: none; } /* small screens keep the header lean; Attendance home still has the big buttons */
}

/* ===================================================================
 * Header pill live counters (v0.92.0) — time worked + time on break.
 * ================================================================ */
.nox-att-ctr-seg {
	display: inline-flex; align-items: baseline; gap: 4px;
	margin-left: 8px; padding-left: 8px;
	border-left: 1px solid rgba(255,255,255,0.25);
}
.nox-att-time { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.02em; }
.nox-att-ctr-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
.nox-att-ctr-brk .nox-att-time { opacity: 0.9; }

/* ===================================================================
 * Header quick punch v2 (v0.93.0) — bigger, brighter, iconized.
 * Appended layer: overrides the v0.91.0 sizing at equal specificity.
 * ================================================================ */
.nox-att-quick { gap: 8px; margin-left: 10px; }
.nox-att-quick-btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 15px; font-size: 12.5px; font-weight: 700;
	letter-spacing: 0.02em; border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.nox-att-quick-ic { display: inline-flex; line-height: 0; }
.nox-att-quick-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.32); }
.nox-att-quick-btn:active { transform: translateY(0); }
.nox-att-q-in {
	background: linear-gradient(135deg, #22B266, #158A4C);
	color: #fff; border-color: rgba(255,255,255,0.18);
}
.nox-att-q-in:hover { filter: brightness(1.08); }
.nox-att-q-break {
	background: linear-gradient(135deg, #F2B33D, #DA9A1F);
	color: #3A2A00; border-color: rgba(255,255,255,0.18);
}
.nox-att-q-break:hover { filter: brightness(1.06); }
.nox-att-q-out {
	background: rgba(255,255,255,0.10);
	color: #FFD9CB; border-color: rgba(226,104,60,0.65);
}
.nox-att-q-out:hover { background: #E2683C; color: #fff; border-color: transparent; }

/* ===================================================================
 * Attendance worked-time reports (v0.94.0)
 * ================================================================ */
.nox-att-report-form { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.nox-att-report-form .nox-fld { min-width: 160px; }
.nox-att-report-btns { display: flex; gap: 10px; margin-left: auto; }
@media (max-width: 700px) { .nox-att-report-btns { margin-left: 0; } }

/* Attendance hourly rates (v0.95.0) */
.nox-rates-table .nox-rate-input { max-width: 130px; }
.nox-rates-table select { max-width: 110px; }

/* ===================================================================
 * Reports hub + Calendar tabs (v0.97.0)
 * ================================================================ */
.nox-mod-reports .nox-nav-ic { color: #5B7286; }
.nox-report-sec-title { display: flex; align-items: center; gap: 9px; }
.nox-report-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--nox-rep-accent, #5B7286); }
.nox-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.nox-report-card {
	border: 1px solid var(--nox-line); border-radius: 12px; padding: 14px 16px;
	display: flex; flex-direction: column; gap: 8px; background: #FBFDFF;
}
.nox-report-card h3 { margin: 0; font-size: 14.5px; }
.nox-report-card p { margin: 0; color: var(--nox-muted); font-size: 12.5px; }
.nox-report-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.nox-report-controls input[type="month"], .nox-report-controls select { font-size: 12.5px; }
.nox-report-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

.nox-cal-tabs { margin-bottom: 14px; }
.nox-cal-chip {
	display: block; font-size: 10.5px; line-height: 1.35; padding: 2px 7px;
	border-radius: 6px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis;
	white-space: nowrap; max-width: 100%; text-decoration: none;
}
.nox-cal-chip-event { background: #EFE9FA; color: #5B3FA8; }
.nox-cal-chip-task { background: #E2F4FB; color: #0E6E93; }
.nox-cal-chip-task.is-overdue { background: #FBE5DC; color: #B44819; }
.nox-cal-chip-task.is-done { background: #E7F5EC; color: #1E7A48; text-decoration: line-through; opacity: 0.8; }
.nox-cal-chip-pto { background: #E7F5EC; color: #1E7A48; }
.nox-cal-chip-worked { background: #EDF2F7; color: #43596C; }
.nox-cal-key-event { background: #7C5CC9; }
.nox-cal-key-task { background: #29ABE2; }
.nox-cal-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--nox-muted); }
.nox-cal-uplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nox-cal-uplist li { display: flex; gap: 12px; align-items: baseline; }
.nox-cal-up-date { color: var(--nox-blue-ink); font-weight: 700; font-size: 12px; min-width: 84px; }

/* Tasks "with person" filter (v0.99.1) */
.nox-with-filter { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; }
.nox-with-filter label { font-size: 12.5px; font-weight: 700; color: var(--nox-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.nox-with-filter select { font-size: 13px; max-width: 220px; }
.nox-with-hint { font-size: 12px; color: var(--nox-muted); }

/* Dashboard "My tasks" with-person filter (v0.99.2) */
.nox-with-filter-widget { margin: 0; }
.nox-with-filter-widget select { font-size: 12.5px; max-width: 170px; }

/* ===================================================================
 * Calendar refinement (v0.101.0): typed event chips + preview popover
 * ================================================================ */
.nox-cal-ev {
	display: flex; align-items: center; gap: 5px; width: 100%;
	border: 1px solid color-mix(in srgb, var(--nox-ev, #1554A0) 35%, transparent);
	background: color-mix(in srgb, var(--nox-ev, #1554A0) 12%, #fff);
	color: color-mix(in srgb, var(--nox-ev, #1554A0) 85%, #000);
	font-size: 10.5px; padding: 2px 7px; border-radius: 6px; margin-top: 3px;
	cursor: pointer; text-align: left;
}
.nox-cal-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-cal-ev .nox-ev-ico { flex: 0 0 auto; color: var(--nox-ev, #1554A0); }
.nox-cal-ev:hover { filter: brightness(0.96); }
.nox-cal-ev.is-personal { border-style: dashed; }

.nox-ev-pop {
	position: absolute; z-index: 260; width: 300px; background: #fff;
	border: 1px solid var(--nox-line); border-radius: 12px;
	box-shadow: 0 12px 32px rgba(10, 31, 60, 0.16); padding: 12px 14px;
}
.nox-ev-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.nox-ev-pop-type { color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: 0.02em; }
.nox-ev-pop-close { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--nox-muted); }
.nox-ev-pop-title { margin: 0 0 4px; font-size: 14.5px; color: var(--nox-ink); }
.nox-ev-pop-when { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--nox-blue-ink); }
.nox-ev-pop-loc, .nox-ev-pop-desc { margin: 0 0 2px; font-size: 12.5px; color: var(--nox-muted); }
.nox-ev-pop-proj { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: #2E6EA6; }
.nox-ev-pop-del { margin-top: 8px; }
.nox-btn-danger-quiet { border: 1px solid #E0B4A6; color: #B44819; background: #FDF3EF; border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }

.nox-cal-add-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nox-cal-add-form input[type="text"] { flex: 1 1 160px; }
.nox-cal-add-desc { flex: 2 1 220px; }
@media (max-width: 700px) { .nox-cal-add-form { flex-direction: column; align-items: stretch; } }

/* Calendar consolidation (v0.102.0) */
.nox-ev-pop-edit { display: inline-block; margin-top: 8px; font-size: 12px; }
.nox-feed-wrap { grid-template-columns: 1fr; }


/* ===================================================================
 * v0.103.0 — calendar grid fix + personal Google Calendar
 * The long chip titles were blowing up 1fr columns (1fr respects
 * min-content); minmax(0, 1fr) + min-width:0 restores 7 equal columns.
 * ================================================================ */
.nox-cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.nox-cal-cell { min-width: 0; overflow: hidden; }
.nox-cal-ev { min-width: 0; max-width: 100%; }
.nox-cal-chip { max-width: 100%; }

.nox-cal-ev.is-gcal { border-style: dotted; }
.nox-gcal-card .nox-gcal-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nox-gcal-card input[name="ics_url"] { flex: 1 1 320px; }
.nox-gcal-hint { font-size: 12px; color: var(--nox-muted); margin-top: 6px; }
.nox-gcal-connected { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nox-gcal-dot { width: 9px; height: 9px; border-radius: 50%; background: #1E9E5A; }

/* ---------------------------------------------------------------------
 * Intellectual Property (v0.105.0). Appended last, per the house rule,
 * so it wins at equal specificity without touching earlier layers.
 * Amber-brown accent: legal / archival, distinct from every module hue.
 * ------------------------------------------------------------------ */
.nox-mod-ip .nox-ico { color: #8A6D3B; }
.nox-ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.nox-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.nox-mini-card {
	display: block; padding: 14px 16px; border: 1px solid var(--nox-line); border-radius: 12px;
	background: var(--nox-white); text-decoration: none; color: var(--nox-ink);
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.nox-mini-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,34,51,.08); border-color: #D8E2EC; }
.nox-mini-card h3 { margin: 0 0 6px; font-size: 15px; }
.nox-mini-card p { margin: 0 0 6px; font-size: 12.5px; }
.nox-sub-card { padding: 14px 16px; border: 1px solid var(--nox-line); border-radius: 12px; background: #FCFDFE; }
.nox-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.nox-kpi {
	display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
	border: 1px solid var(--nox-line); border-radius: 12px; background: var(--nox-white);
}
.nox-kpi-label { font-size: 12px; color: var(--nox-muted); }
.nox-kpi-value { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 24px; color: var(--nox-navy-ink); }
.nox-pill {
	display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px;
	font-weight: 600; background: var(--nox-pale); color: var(--nox-blue-ink); margin-right: 4px;
}
.nox-pill.nox-tone-ok    { background: #E7F6EC; color: #14572A; }
.nox-pill.nox-tone-warn  { background: #FBF1DC; color: #7A5A05; }
.nox-pill.nox-tone-bad   { background: #FBEAEA; color: #8E2B22; }
.nox-pill.nox-tone-info  { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-pill.nox-tone-muted { background: #EEF2F6; color: var(--nox-muted); }
/* ---------------------------------------------------------------------
   Rows that are listed but do not count: cancelled orders, and orders
   refunded in full. They stay in the log — it is a log — but none of the
   totals above them include those figures, so the row has to say so at a
   glance rather than leaving the reader to add up columns that disagree.

   The line-through is set on each CELL, not on the row. That is what lets
   a cell opt out with .nox-void-keep: a decoration set on the <tr> would
   propagate into every descendant with no way back. Pills escape anyway —
   text-decoration does not cross into an inline-block — which is why the
   status badges stay crisp inside a struck row.

   Never decoration alone: every one of these rows also carries its state
   in words, so the meaning survives greyscale, low vision and print.
   ------------------------------------------------------------------ */
.nox-void-row > td {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	color: var(--nox-muted);
	opacity: .75;
}
.nox-void-row > td.nox-void-keep { text-decoration: none; opacity: 1; }
.nox-void-row a { color: inherit; }
/* The status word itself: never struck, and readable on its own. */
.nox-void-tag {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	color: #8E2B22;
}
.nox-void-refunded > td.nox-void-keep .nox-void-tag { color: #7A5A05; }


/* "Create a project from this event" sits between the edit form and the
   delete zone: separated from both, but not styled as a danger. */
.nox-ev-toproject { border-top: 1px solid var(--nox-line); margin-top: 20px; padding-top: 16px; }
.nox-ev-toproject .nox-field-hint { display: block; margin-top: 6px; }
.nox-ip-dategrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.nox-ip-dup { background: #FBF1DC; border-left: 3px solid #C08A00; color: #6B4E05; }

/* ---------------------------------------------------------------------
 * Segmented navigation (v0.109.0) — platform-wide.
 *
 * Replaces the old outlined-pill row. The bar is a tinted track and the
 * active item is a white pill lifted off it, which reads as "you are
 * here" without the heavy navy fill the old style used. Because this
 * restyles the existing .nox-filter-tabs class, every module that
 * already used it (tasks, inventory, quality, sales, reports, equipment,
 * forms, calendar…) picks the new look up with no view changes.
 *
 * Appended last, per the house rule, so it wins at equal specificity.
 * ------------------------------------------------------------------ */

.nox-filter-tabs {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 4px;
	margin: 0 0 18px;
	padding: 4px;
	background: #EDF1F5;
	border-radius: 999px;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	vertical-align: top;
}
.nox-filter-tabs::-webkit-scrollbar { display: none; }

.nox-filter-tabs a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	color: var(--nox-muted);
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.nox-filter-tabs a:hover {
	background: rgba(255, 255, 255, .6);
	color: var(--nox-navy-ink);
}
.nox-filter-tabs a.is-active {
	background: var(--nox-white);
	color: var(--nox-navy-ink);
	box-shadow: 0 1px 3px rgba(10, 31, 60, .14), 0 0 0 1px rgba(10, 31, 60, .04);
}

/* Optional count badge inside a tab. */
.nox-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 6px;
	border-radius: 999px;
	background: #DDE5EC;
	color: var(--nox-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.nox-filter-tabs a.is-active .nox-tab-count { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-filter-tabs a.has-alert .nox-tab-count { background: #FBEAEA; color: #8E2B22; }

/* On narrow screens the track spans the width and scrolls. */
@media (max-width: 720px) {
	.nox-filter-tabs { display: flex; width: 100%; }
}

/* ---------------------------------------------------------------------
 * Slim search bar — replaces search boxes that were full-width cards.
 * ------------------------------------------------------------------ */

.nox-searchbar {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 620px;
	margin: 0 0 20px;
	padding: 8px 10px 8px 16px;
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(10, 31, 60, .04);
}
.nox-searchbar svg { flex: 0 0 auto; color: #9AA9B8; }
.nox-searchbar input[type="search"],
.nox-searchbar input[type="text"] {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 13.5px;
	color: var(--nox-ink);
}
.nox-searchbar input::placeholder { color: #9AA9B8; }
.nox-searchbar button {
	flex: 0 0 auto;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--nox-blue);
	color: var(--nox-white);
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.nox-searchbar button:hover { background: var(--nox-bright); }
.nox-searchbar .nox-btn-quiet { flex: 0 0 auto; }

/* ---------------------------------------------------------------------
 * KPI tones — a flat strip of identical numbers hides the one that
 * matters, so counts that demand action carry their own colour.
 * ------------------------------------------------------------------ */

.nox-kpi.is-alert .nox-kpi-value { color: #B4232A; }
.nox-kpi.is-warn .nox-kpi-value  { color: #C08A00; }
.nox-kpi.is-good .nox-kpi-value  { color: #1E7A3C; }

/* Primary buttons gain the pill shape the segmented control implies. */
.nox-btn,
.nox-btn-small {
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.nox-btn-quiet {
	padding: 9px 12px;
	border-radius: 999px;
	transition: background .16s ease, color .16s ease;
}
.nox-btn-quiet:hover { background: #EDF1F5; color: var(--nox-navy-ink); }

/* The head row wraps rather than crushing the title on small widths. */
.nox-page-head { flex-wrap: wrap; }
.nox-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Second-level filters. When a screen sits inside a section that already
 * has a segmented bar, its own filters must not compete with it: no
 * track, lighter weight, and a pale fill on the active one. */
.nox-filter-tabs.nox-tabs-sub {
	background: transparent;
	padding: 0;
	gap: 6px;
	margin-bottom: 16px;
}
.nox-filter-tabs.nox-tabs-sub a {
	padding: 7px 14px;
	font-size: 13px;
	color: var(--nox-muted);
}
.nox-filter-tabs.nox-tabs-sub a:hover { background: #EDF1F5; color: var(--nox-navy-ink); }
.nox-filter-tabs.nox-tabs-sub a.is-active {
	background: var(--nox-pale);
	color: var(--nox-blue-ink);
	box-shadow: none;
}

/* A section heading that carries its own action, so a detail screen does
 * not have to pile every action into the page header. */
.nox-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 12px;
}
.nox-section-head h2,
.nox-section-head h3 { margin: 0; }
.nox-section-head .nox-btn-quiet { font-size: 12.5px; }

/* ---------------------------------------------------------------------
 * Centred navigation row (v0.110.0)
 *
 * The segmented bar is only as wide as its tabs, so left-aligning it made
 * it shift horizontally from screen to screen as the number of sections
 * changed. Anchoring it to the centre of a three-column grid fixes it in
 * place: the side columns are equal width by construction, so the bar
 * lands in the same spot regardless of what sits beside it.
 *
 * Column 1 holds the title (and any back link), column 3 the actions.
 * ------------------------------------------------------------------ */

.nox-page-head.nox-head-tabs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}
.nox-page-head.nox-head-tabs > h1 {
	justify-self: start;
	min-width: 0;
	font-size: 21px;
	line-height: 1.25;
}
.nox-page-head.nox-head-tabs > .nox-filter-tabs {
	justify-self: center;
	margin: 0;
}
.nox-page-head.nox-head-tabs > .nox-head-right {
	justify-self: end;
	flex-wrap: nowrap;
}

/* The left column may carry a back link above or beside the title. */
.nox-head-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	justify-self: start;
}
.nox-head-left h1 { margin: 0; font-size: 21px; line-height: 1.25; min-width: 0; }

/* Below this width three columns stop being honest — the bar would be
 * squeezed to a sliver. Stack instead, keeping the bar centred. */
@media (max-width: 1080px) {
	.nox-page-head.nox-head-tabs {
		grid-template-columns: 1fr auto;
		row-gap: 14px;
	}
	.nox-page-head.nox-head-tabs > .nox-filter-tabs {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
		max-width: 100%;
	}
	.nox-page-head.nox-head-tabs > .nox-head-right { justify-self: end; }
}
@media (max-width: 720px) {
	.nox-page-head.nox-head-tabs > .nox-filter-tabs { justify-self: stretch; }
}

/* Some screens use the dashboard head instead.
 *
 * v0.350.1 — TWO ROWS BY DEFAULT, not one.
 *
 * This header carries a title, five tabs and up to five controls. That does
 * not fit on one line at any width people actually work at, and the way it
 * failed was the worst available: .nox-head-right overflowed its grid track
 * and rendered ON TOP of the tabs, hiding the active one. Two earlier
 * attempts treated the symptom — stopping the export triple from stacking,
 * then moving the breakpoint from 1080px to 1280px — and both left the
 * overlap intact a little further along the ruler, because the row was
 * never wide enough for the content in the first place.
 *
 * So the second row is now the normal state: title and actions on one line,
 * tabs on their own beneath. The single-row arrangement is kept only above
 * 1600px, where it has room to be true. And .nox-head-right may always
 * wrap: overflowing a track is what caused the overlap, and wrapping inside
 * its own column is always survivable.
 */
.nox-dash-head.nox-head-tabs {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 16px;
	row-gap: 14px;
}
.nox-dash-head.nox-head-tabs > h1 { justify-self: start; min-width: 0; }
.nox-dash-head.nox-head-tabs > .nox-filter-tabs {
	grid-column: 1 / -1;
	grid-row: 2;
	justify-self: center;
	margin: 0;
	max-width: 100%;
}
.nox-dash-head.nox-head-tabs > .nox-head-right {
	justify-self: end;
	min-width: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* The export triple is one control: it never breaks into a column. */
.nox-export-links { flex-wrap: nowrap; }

/* One row again only where it genuinely fits. Measured, not guessed: title
   110 + tabs 622 + controls 675 + gaps + page padding = ~1530.
   The columns are auto | 1fr | auto, NOT 1fr | auto | 1fr. The old symmetric
   version gave the title's track and the controls' track the same width, so
   at 1700px the controls got the 478px the 110px title also got, and wrapped
   with 200px of empty space beside the heading. Sizing the outer tracks to
   their content and letting the tabs absorb the slack is what makes the
   single row actually usable.

   The threshold is 1600 rather than the measured 1530: these labels are
   translated, and the Spanish ones are longer ("Verificación de stock",
   "Añadir producto"). A margin costs a wider screen one extra row of
   height; being tight costs every Spanish reader a wrapped header. Below
   the threshold the fallback is two clean rows, never an overlap. */
@media (min-width: 1600px) {
	.nox-dash-head.nox-head-tabs {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
	.nox-dash-head.nox-head-tabs > .nox-filter-tabs {
		grid-column: auto;
		grid-row: auto;
	}
}

/* ---------------------------------------------------------------------
 * Calendar (v0.111.0) — toolbar, week view, agenda.
 * ------------------------------------------------------------------ */

.nox-cal-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 14px;
	padding: 10px 12px;
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(10, 31, 60, .04);
}

.nox-cal-stepper { display: flex; align-items: center; gap: 6px; }
.nox-cal-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	color: var(--nox-muted);
	text-decoration: none;
	background: #F2F5F8;
}
.nox-cal-step:hover { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-cal-today {
	padding: 8px 15px;
	border-radius: 999px;
	background: #F2F5F8;
	color: var(--nox-navy-ink);
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}
.nox-cal-today:hover { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-cal-today.is-current { background: var(--nox-pale); color: var(--nox-blue-ink); }

.nox-cal-jump { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nox-cal-jump select,
.nox-cal-jump input[type="date"] {
	padding: 7px 10px;
	border: 1px solid var(--nox-line);
	border-radius: 9px;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 13px;
	color: var(--nox-ink);
	background: var(--nox-white);
}
.nox-cal-jump-sep {
	width: 1px;
	height: 22px;
	background: var(--nox-line);
	margin: 0 4px;
}
.nox-cal-views { margin-bottom: 0 !important; }

.nox-cal-monthname {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 17px;
	margin: 0 0 12px;
	color: var(--nox-navy-ink);
}
.nox-cal-range { color: var(--nox-muted); font-size: 13px; margin: 0 0 12px; }

/* A day cell reveals its add button on hover, so the grid stays calm. */
.nox-cal-cell { position: relative; }
.nox-cal-addday {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--nox-pale);
	color: var(--nox-blue-ink);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	opacity: 0;
	transition: opacity .14s ease;
}
.nox-cal-cell:hover .nox-cal-addday,
.nox-cal-addday:focus { opacity: 1; }

/* ---- Week view ---- */
.nox-cal-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}
.nox-cal-wkcol {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 190px;
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: 13px;
	padding: 10px;
}
.nox-cal-wkcol.is-today { border-color: var(--nox-bright); box-shadow: 0 0 0 2px rgba(41, 171, 226, .16); }
.nox-cal-wkcol.is-past { background: #FAFBFC; }
.nox-cal-wkhead {
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--nox-line);
	margin-bottom: 8px;
}
.nox-cal-wkdow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--nox-muted); }
.nox-cal-wkday { font-family: 'Montserrat', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: var(--nox-navy-ink); }
.nox-cal-wkcol.is-today .nox-cal-wkday { color: var(--nox-blue-ink); }
.nox-cal-wkbody { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.nox-cal-wkempty { color: #C3CEDA; margin: 0; font-size: 13px; }
.nox-cal-wkitem {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 8px;
	background: #F6F9FC;
	border-left: 3px solid var(--nox-ev, var(--nox-blue));
	font-size: 12.5px;
}
.nox-cal-wktime { color: var(--nox-muted); font-weight: 600; font-size: 11.5px; flex: 0 0 auto; }
.nox-cal-wktitle { color: var(--nox-ink); overflow-wrap: anywhere; }
.nox-cal-wklink { color: var(--nox-blue-ink); margin-left: auto; flex: 0 0 auto; }
.nox-cal-wkadd {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--nox-pale);
	color: var(--nox-blue-ink);
	font-weight: 700;
	text-decoration: none;
	opacity: 0;
	transition: opacity .14s ease;
}
.nox-cal-wkcol:hover .nox-cal-wkadd, .nox-cal-wkadd:focus { opacity: 1; }

@media (max-width: 1000px) {
	.nox-cal-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nox-cal-wkcol { min-height: 130px; }
}
@media (max-width: 560px) {
	.nox-cal-week { grid-template-columns: 1fr; }
}

/* ---- Agenda view ---- */
.nox-agenda-day {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--nox-line);
}
.nox-agenda-day:last-child { border-bottom: 0; }
.nox-agenda-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 4px;
}
.nox-agenda-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--nox-muted); }
.nox-agenda-num { font-family: 'Montserrat', system-ui, sans-serif; font-size: 24px; font-weight: 700; color: var(--nox-navy-ink); line-height: 1.1; }
.nox-agenda-mon { font-size: 11px; color: var(--nox-muted); }
.nox-agenda-day.is-today .nox-agenda-num { color: var(--nox-blue-ink); }
.nox-agenda-items { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nox-agenda-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 11px;
	background: #F6F9FC;
	border-left: 3px solid var(--nox-ev, var(--nox-blue));
}
.nox-agenda-time { flex: 0 0 78px; color: var(--nox-muted); font-size: 12px; font-weight: 600; padding-top: 2px; }
.nox-agenda-main { flex: 1; min-width: 0; }
.nox-agenda-main strong { display: block; color: var(--nox-ink); font-size: 14px; }
.nox-agenda-meta { display: block; color: var(--nox-muted); font-size: 12px; margin-top: 2px; }
.nox-agenda-desc { margin: 5px 0 0; color: var(--nox-muted); font-size: 12.5px; }
.nox-agenda-actions { display: flex; gap: 4px; flex: 0 0 auto; }

@media (max-width: 620px) {
	.nox-agenda-day { grid-template-columns: 52px 1fr; gap: 10px; }
	.nox-agenda-item { flex-wrap: wrap; }
	.nox-agenda-time { flex: 0 0 100%; }
}

/* Guest picker — a scrollable checklist rather than a multi-select, which
 * nobody knows how to operate without instructions. */
.nox-guest-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 4px 12px;
	max-height: 190px;
	overflow-y: auto;
	padding: 10px 12px;
	border: 1px solid var(--nox-line);
	border-radius: 11px;
	background: #FAFCFE;
}
.nox-guest-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 6px;
	border-radius: 8px;
	font-size: 13px;
	color: var(--nox-ink);
	cursor: pointer;
	margin: 0;
	font-weight: 400;
}
.nox-guest-opt:hover { background: var(--nox-pale); }
.nox-guest-opt input { margin: 0; flex: 0 0 auto; }

.nox-cal-add-guests { grid-column: 1 / -1; }
.nox-cal-add-guests summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--nox-blue-ink);
	padding: 6px 0;
}
.nox-cal-add-guests .nox-guest-picker { margin-top: 8px; }

.nox-cal-wkguests { color: var(--nox-muted); font-size: 11px; margin-left: auto; }
.nox-ev-pop-guests:empty { display: none; }
.nox-ev-pop-guests { font-size: 12.5px; color: var(--nox-muted); margin: 4px 0 0; }
.nox-ev-pop-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nox-blue-ink);
}

/* ---------------------------------------------------------------------
 * My calendar (v0.113.0)
 *
 * The grid now leads the page and the two setup panels sit below it as
 * folds. Previously an add form and a Google panel pushed the calendar
 * itself off the first screen — on a calendar page, the calendar should
 * be the first thing there.
 * ------------------------------------------------------------------ */

.nox-cal-fold { padding: 0; }
.nox-cal-fold > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	cursor: pointer;
	list-style: none;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--nox-navy-ink);
	border-radius: 16px;
}
.nox-cal-fold > summary::-webkit-details-marker { display: none; }
.nox-cal-fold > summary::before {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--nox-muted);
	border-bottom: 2px solid var(--nox-muted);
	transform: rotate(-45deg);
	transition: transform .16s ease;
	flex: 0 0 auto;
	margin-right: 2px;
}
.nox-cal-fold[open] > summary::before { transform: rotate(45deg); }
.nox-cal-fold > summary:hover { background: #F6F9FC; }
.nox-cal-fold > *:not(summary) { padding-left: 18px; padding-right: 18px; }
.nox-cal-fold > *:last-child { padding-bottom: 16px; }

.nox-fold-state {
	margin-left: auto;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--nox-muted);
	background: #F2F5F8;
	padding: 3px 10px;
	border-radius: 999px;
}

/* A failing connection says so rather than showing a confident green dot. */
.nox-gcal-connected.is-failing .nox-gcal-dot { background: #C0392B; }

/* The personal add form lays out as a grid so the fields stop stretching
 * into one unreadable strip. */
.nox-cal-add-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
	align-items: center;
}
.nox-cal-add-form .nox-cal-add-desc { grid-column: span 2; }
.nox-cal-add-form > button[type="submit"] { justify-self: start; }
@media (max-width: 700px) {
	.nox-cal-add-form { grid-template-columns: 1fr; }
	.nox-cal-add-form .nox-cal-add-desc { grid-column: 1; }
}

/* ---------------------------------------------------------------------
 * v0.114.0 — button combination fix + event type icons
 *
 * `.nox-btn-small` paints a blue gradient; `.nox-btn-ghost` sets grey
 * ink. Combined — as the calendar's "Jump" button did — that produced
 * dark lettering on a blue field. The same collision was already fixed
 * for `.nox-btn-quiet` and `.nox-menu-danger`; this completes the set.
 * ------------------------------------------------------------------ */

.nox-btn-small.nox-btn-ghost {
	background: var(--nox-card) !important;
	background-image: none !important;
	color: var(--nox-blue-ink) !important;
	border: 1px solid var(--nox-line) !important;
	box-shadow: none !important;
	font-weight: 600;
}
.nox-btn-small.nox-btn-ghost:hover {
	background: var(--nox-pale) !important;
	border-color: var(--nox-blue) !important;
	color: var(--nox-blue-ink) !important;
	filter: none !important;
}

/* ---- Event type icons ----
 * Every icon inherits its colour from the entry it belongs to, so the
 * type is legible twice over: by shape and by hue. Shape carries it
 * alone for anyone who cannot separate the colours. */

.nox-ev-ico { flex: 0 0 auto; vertical-align: -2px; }

.nox-cal-chip .nox-ev-ico { color: var(--nox-ev, var(--nox-blue)); }
.nox-cal-chip-task .nox-ev-ico { color: var(--nox-blue-ink); }
.nox-cal-chip-pto .nox-ev-ico { color: #1E7A3C; }
.nox-cal-chip-pto,
.nox-cal-chip-task { display: inline-flex; align-items: center; gap: 5px; }
.nox-cal-chip-pto > span,
.nox-cal-chip-task > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nox-cal-wkico { display: inline-flex; color: var(--nox-ev, var(--nox-blue)); flex: 0 0 auto; }
.nox-agenda-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--nox-white);
	color: var(--nox-ev, var(--nox-blue));
	flex: 0 0 auto;
	border: 1px solid var(--nox-line);
}

/* Legend entries now show the real icon rather than a colour square, so
 * the key matches what is actually drawn in the cells. */
.nox-cal-legend .nox-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--nox-muted);
}
.nox-cal-legend .nox-legend-item .nox-ev-ico { color: var(--nox-ev, var(--nox-muted)); }
.nox-cal-legend .nox-legend-task .nox-ev-ico { color: var(--nox-blue-ink); }
.nox-cal-legend .nox-legend-leave .nox-ev-ico { color: #1E7A3C; }

/* ===================================================================
 * Feed refresh (v0.117.0) — polls, lightbox gallery, celebrations rail
 * and celebration posts, plus a general visual lift for the stream.
 * Appended last so it wins at equal specificity (established pattern).
 * ================================================================ */

/* Layout: main column + right rail. */
.nox-feed-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.nox-feed-main { min-width: 0; }
.nox-feed-rail { position: sticky; top: 84px; }
@media ( max-width: 1000px ) {
	.nox-feed-wrap { grid-template-columns: 1fr; }
	.nox-feed-rail { position: static; order: -1; }
}

/* Post cards: a touch more presence. */
.nox-post { border-radius: 16px; box-shadow: 0 1px 2px rgba(10,31,60,.05), 0 6px 18px rgba(10,31,60,.06); transition: box-shadow .18s ease; }
.nox-post:hover { box-shadow: 0 2px 4px rgba(10,31,60,.06), 0 10px 26px rgba(10,31,60,.09); }
.nox-post-body { font-size: 14.5px; line-height: 1.6; }
.nox-mention-all { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--nox-pale); color: var(--nox-blue-ink); font-weight: 700; }

/* Media grid: rounded tiles, cover crops, gentle zoom, no borders. */
.nox-post-media { display: grid; gap: 6px; margin: 12px 0 4px; border-radius: 14px; overflow: hidden; }
.nox-post-media.n1 { grid-template-columns: 1fr; }
.nox-post-media.n2 { grid-template-columns: 1fr 1fr; }
.nox-post-media.n3 { grid-template-columns: 2fr 1fr; grid-auto-rows: 150px; }
.nox-post-media.n3 .nox-post-img:first-child { grid-row: span 2; }
.nox-post-media.n4 { grid-template-columns: 1fr 1fr; }
.nox-post-img { display: block; padding: 0; border: 0; background: var(--nox-pale); cursor: zoom-in; overflow: hidden; }
.nox-post-media.n1 .nox-post-img { max-height: 440px; }
.nox-post-media.n2 .nox-post-img, .nox-post-media.n4 .nox-post-img { height: 200px; }
.nox-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.nox-post-media.n1 .nox-post-img img { max-height: 440px; object-fit: cover; }
.nox-post-img:hover img { transform: scale(1.03); }

/* Lightbox. */
body.nox-lb-open { overflow: hidden; }
.nox-lightbox { position: fixed; inset: 0; z-index: 4000; background: rgba(6,15,28,.92); display: flex; align-items: center; justify-content: center; }
.nox-lightbox[hidden] { display: none; }
.nox-lb-img { max-width: min(92vw, 1200px); max-height: 88vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.nox-lb-close, .nox-lb-prev, .nox-lb-next { position: fixed; border: 0; background: rgba(255,255,255,.09); color: #fff; cursor: pointer; border-radius: 999px; width: 44px; height: 44px; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.nox-lb-close:hover, .nox-lb-prev:hover, .nox-lb-next:hover { background: rgba(255,255,255,.22); }
.nox-lb-close { top: 18px; right: 20px; }
.nox-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.nox-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.nox-lb-counter { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; letter-spacing: .04em; }

/* Composer: poll box. */
.nox-poll-toggle.is-on { background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-poll-box { margin: 10px 0 4px; padding: 14px; border: 1px solid var(--nox-line); border-radius: 12px; background: #F7FAFD; display: flex; flex-direction: column; gap: 10px; }
.nox-poll-box input[type="text"] { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--nox-line); border-radius: 9px; font: inherit; font-size: 13.5px; background: var(--nox-white); }
.nox-poll-opts { display: flex; flex-direction: column; gap: 8px; }
.nox-poll-addopt { align-self: flex-start; }
.nox-poll-settings { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--nox-muted); }
.nox-poll-settings label { display: flex; align-items: center; gap: 7px; cursor: pointer; }

/* Poll block on a post. */
.nox-poll { margin: 12px 0 4px; padding: 14px; border: 1px solid var(--nox-line); border-radius: 12px; background: #F9FBFD; }
.nox-poll.is-busy { opacity: .6; pointer-events: none; }
.nox-poll-q { font-family: var(--nox-font-head, 'Montserrat', sans-serif); font-weight: 700; font-size: 14.5px; color: var(--nox-ink); margin-bottom: 10px; }
.nox-poll-body { display: flex; flex-direction: column; gap: 7px; }
.nox-poll-opt { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--nox-line); border-radius: 9px; background: var(--nox-white); font: inherit; font-size: 13.5px; color: var(--nox-ink); cursor: pointer; overflow: hidden; transition: border-color .15s ease; }
.nox-poll-opt:hover { border-color: var(--nox-bright); }
.nox-poll-opt.is-mine { border-color: var(--nox-blue); box-shadow: inset 0 0 0 1px var(--nox-blue); }
.nox-poll-fill { position: absolute; inset: 0 auto 0 0; background: var(--nox-pale); z-index: 0; transition: width .3s ease; }
.nox-poll-opt.is-mine .nox-poll-fill { background: #DCEBFA; }
.nox-poll-label { position: relative; z-index: 1; flex: 1 1 auto; font-weight: 600; }
.nox-poll-count { position: relative; z-index: 1; flex: 0 0 auto; font-size: 12px; color: var(--nox-muted); font-weight: 600; white-space: nowrap; }
.nox-poll-voters { position: relative; z-index: 1; flex-basis: 100%; font-size: 11.5px; color: var(--nox-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-poll-opt { flex-wrap: wrap; }
.nox-poll-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: 12px; color: var(--nox-muted); }

/* Celebrations rail. */
.nox-rail-card { padding: 16px; }
.nox-rail-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; color: var(--nox-navy-ink); }
.nox-rail-title svg { color: #E2683C; }
.nox-celeb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nox-celeb-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .13s ease; }
.nox-celeb-row:hover { background: var(--nox-pale); }
.nox-celeb-row.is-today { background: linear-gradient(90deg, #FDF3EC, #FDFBF3); }
.nox-celeb-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nox-celeb-name { font-weight: 700; font-size: 13px; color: var(--nox-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nox-celeb-what { font-size: 11.5px; color: var(--nox-muted); }
.nox-celeb-date { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--nox-blue-ink); }
.nox-celeb-row.is-today .nox-celeb-date { color: #C05621; }
.nox-rail-foot { margin: 10px 0 0; font-size: 12.5px; }

/* Celebration posts. */
.nox-post-celeb { overflow: hidden; }
.nox-post-celeb.is-birthday { background: linear-gradient(160deg, #FFF9F2 0%, #FDF1F5 60%, #F4F7FF 100%); }
.nox-post-celeb.is-anniversary { background: linear-gradient(160deg, #F0FBF8 0%, #F2F8FF 70%, #FDFBF3 100%); }
.nox-celeb-hero { text-align: center; padding: 18px 12px 6px; position: relative; }
.nox-celeb-hero .nox-ava { width: 64px; height: 64px; margin: 0 auto; box-shadow: 0 4px 14px rgba(10,31,60,.14); }
.nox-celeb-burst { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--nox-white); box-shadow: 0 3px 10px rgba(10,31,60,.10); margin-bottom: 8px; color: #E2683C; }
.nox-post-celeb.is-anniversary .nox-celeb-burst { color: #1B9C8F; }
.nox-celeb-title { margin: 10px 0 2px; font-size: 19px; color: var(--nox-navy-ink); }
.nox-celeb-sub { margin: 0 0 8px; font-size: 13px; color: var(--nox-muted); }
.nox-celeb-callink { font-size: 12.5px; font-weight: 700; }
.nox-post-head-celeb { justify-content: space-between; }
.nox-celeb-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nox-muted); }

/* Comments: softer bubbles. */
.nox-comment-bubble { background: #F3F6FA; border-radius: 12px; padding: 8px 12px; }
.nox-comment-bubble .nox-comment-text { font-size: 13.5px; line-height: 1.5; }

/* Reactions: pill polish. */
.nox-react-btn { border-radius: 999px; transition: transform .12s ease, background .12s ease; }
.nox-react-btn:hover { transform: translateY(-1px); }
.nox-react-btn.is-mine { background: var(--nox-pale); box-shadow: inset 0 0 0 1px var(--nox-bright); }
.nox-poll-box[hidden] { display: none; }

/* Calendar timezones (v0.118.0) — the team-times line in the popover. */
.nox-ev-pop-tz { margin: 2px 0 6px; font-size: 12px; line-height: 1.5; color: var(--nox-muted); background: var(--nox-pale); border-radius: 8px; padding: 6px 9px; }

/* =====================================================================
 * Workforce (v0.119.0)
 * ================================================================== */
.nox-mod-workforce .nox-ico { color: #5A67D8; }
.nox-wf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .nox-wf-grid { grid-template-columns: 1fr; } }
.nox-wf-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nox-wf-col > .nox-card { margin: 0; }
.nox-wf-sub { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--nox-muted); }
.nox-wf-alerts { border-left: 4px solid #C08A00; }
.nox-wf-alert-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nox-wf-alert-list li { display: flex; align-items: center; gap: 10px; }
.nox-wf-alert-list a { text-decoration: none; color: inherit; }
.nox-wf-roster td { vertical-align: middle; }
.nox-wf-row-term { opacity: .62; }
.nox-wf-history { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.nox-wf-history li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nox-wf-forms { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nox-wf-forms li { display: flex; align-items: center; gap: 10px; }
.nox-wf-forms a { color: var(--nox-ink); text-decoration: none; }
.nox-wf-forms a:hover { text-decoration: underline; }
.nox-wf-danger { border-left: 4px solid #C8564A; }
.nox-wf-head h1 .nox-pill { font-size: 11px; }

/* =====================================================================
   v0.120.0 — Task conversations layer
   Threads · rich composer · reactions v2 · progress bars · timer states
   · team boards. Appended last so it wins at equal specificity.
   ===================================================================== */

/* --- Reply threads ------------------------------------------------- */
.nox-thread-replies { list-style: none; margin: 0; padding: 0; }
.nox-reply-list {
	list-style: none;
	margin: 2px 0 6px 44px;
	padding: 6px 0 2px 14px;
	border-left: 2px solid var(--nox-line, #E1E8EF);
}
.nox-comment-reply { padding: 6px 0; }
.nox-comment-reply .nox-comment-body { font-size: 0.95em; }
.nox-thread-replybox { list-style: none; margin: 4px 0 14px 44px; }
.nox-reply-form textarea { min-height: 54px; }

/* --- Comment footer: reactions + tools ----------------------------- */
.nox-comment-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}
.nox-comment-foot .nox-comment-tools { margin: 0; }
.nox-reply-btn { font-weight: 600; }

/* --- Reactions v2 (semantic SVG set) ------------------------------- */
.nox-creact { display: inline-flex; gap: 4px; }
.nox-creact-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 7px;
	border: 1px solid var(--nox-line, #E1E8EF);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	color: var(--nox-muted, #5B7286);
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.nox-creact-btn:hover { transform: translateY(-1px); }
.nox-creact-btn .nox-creact-n { font-size: 12px; font-weight: 700; min-width: 0; }
/* Per-reaction hue (icon inherits currentColor). Doubled class beats the
   legacy .nox-creact-btn.is-on blue rule at line ~3880. */
.nox-creact-btn.nox-creact-flag,  .nox-legend-item.nox-creact-flag  { color: #C0392B; }
.nox-creact-btn.nox-creact-check, .nox-legend-item.nox-creact-check { color: #1E9E5A; }
.nox-creact-btn.nox-creact-wait,  .nox-legend-item.nox-creact-wait  { color: #C08A00; }
.nox-creact-btn.nox-creact-look,  .nox-legend-item.nox-creact-look  { color: #1554A0; }
.nox-creact-btn.nox-creact-ask,   .nox-legend-item.nox-creact-ask   { color: #E2683C; }
.nox-creact-btn.is-on.nox-creact-flag  { background: #FBEAE8; border-color: #C0392B; }
.nox-creact-btn.is-on.nox-creact-check { background: #E7F6EE; border-color: #1E9E5A; }
.nox-creact-btn.is-on.nox-creact-wait  { background: #FBF3E0; border-color: #C08A00; }
.nox-creact-btn.is-on.nox-creact-look  { background: #E8F2FB; border-color: #1554A0; }
.nox-creact-btn.is-on.nox-creact-ask   { background: #FDEFE9; border-color: #E2683C; }

/* --- Reaction legend under the comment box ------------------------- */
.nox-react-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-top: 10px;
	padding: 8px 12px;
	border: 1px dashed var(--nox-line, #E1E8EF);
	border-radius: 10px;
	background: #FAFCFE;
	font-size: 12.5px;
	color: var(--nox-muted, #5B7286);
}
.nox-legend-title { font-weight: 700; color: var(--nox-ink, #0F2233); }
.nox-legend-item { display: inline-flex; align-items: center; gap: 5px; }

/* --- Rich comment bodies ------------------------------------------- */
.nox-comment-rich p { margin: 0 0 6px; }
.nox-comment-rich p:last-child { margin-bottom: 0; }
.nox-comment-rich ul, .nox-comment-rich ol { margin: 4px 0 8px 20px; }
.nox-comment-rich blockquote {
	margin: 6px 0;
	padding: 4px 12px;
	border-left: 3px solid var(--nox-bright, #29ABE2);
	background: var(--nox-pale, #E8F2FB);
	border-radius: 0 8px 8px 0;
}
.nox-comment-rich code, .nox-comment-rich pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: #F1F5F9;
	border-radius: 5px;
	padding: 1px 5px;
}
.nox-comment-rich pre { display: block; padding: 8px 10px; overflow: auto; }
img.nox-gif {
	display: block;
	max-width: 260px;
	max-height: 220px;
	border-radius: 10px;
	margin: 6px 0 2px;
	box-shadow: 0 1px 4px rgba(10, 31, 60, 0.15);
}

/* --- Composer ------------------------------------------------------- */
.nox-rte { flex: 1; min-width: 0; }
.nox-rte-bar {
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	padding: 4px 6px;
	border: 1px solid var(--nox-line, #E1E8EF);
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	background: #F7FAFD;
}
.nox-rte-btn {
	min-width: 28px;
	height: 26px;
	padding: 0 7px;
	border: none;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	font-size: 13px;
	color: var(--nox-ink, #0F2233);
}
.nox-rte-btn:hover { background: var(--nox-pale, #E8F2FB); }
.nox-rte-btn-gif { font-weight: 800; font-size: 11px; letter-spacing: 0.5px; }
.nox-rte-editor {
	min-height: 72px;
	max-height: 320px;
	overflow-y: auto;
	padding: 10px 12px;
	border: 1px solid var(--nox-line, #E1E8EF);
	border-radius: 0 0 10px 10px;
	background: #fff;
	font: inherit;
	line-height: 1.5;
	outline: none;
}
.nox-rte-editor:focus { border-color: var(--nox-bright, #29ABE2); box-shadow: 0 0 0 3px rgba(41, 171, 226, 0.15); }
.nox-rte-editor:empty::before {
	content: attr(data-placeholder);
	color: var(--nox-muted, #5B7286);
	pointer-events: none;
}
.nox-rte-editor.is-invalid { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15); }
.nox-rte-editor img.nox-gif { max-width: 220px; }
.nox-comment-compose .nox-rte { width: 100%; }

/* Panels (emoji / gif) */
.nox-rte-panel {
	margin-top: 6px;
	padding: 10px;
	border: 1px solid var(--nox-line, #E1E8EF);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(10, 31, 60, 0.10);
	max-height: 280px;
	overflow-y: auto;
}
.nox-emoji-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--nox-muted, #5B7286); margin: 8px 0 4px; }
.nox-emoji-group:first-child { margin-top: 0; }
.nox-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 2px; }
.nox-emoji-btn {
	border: none;
	background: transparent;
	font-size: 19px;
	line-height: 1;
	padding: 5px 0;
	border-radius: 6px;
	cursor: pointer;
}
.nox-emoji-btn:hover { background: var(--nox-pale, #E8F2FB); }
.nox-gif-search {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid var(--nox-line, #E1E8EF);
	border-radius: 8px;
	margin-bottom: 8px;
	font: inherit;
}
.nox-gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.nox-gif-item { border: none; padding: 0; background: transparent; cursor: pointer; border-radius: 8px; overflow: hidden; line-height: 0; }
.nox-gif-item img { width: 100%; height: 84px; object-fit: cover; border-radius: 8px; transition: transform 0.15s ease; }
.nox-gif-item:hover img { transform: scale(1.04); }
.nox-gif-note { color: var(--nox-muted, #5B7286); font-size: 13px; margin: 4px 0; }
.nox-gif-loading { color: var(--nox-muted, #5B7286); }

/* --- Hero progress bar --------------------------------------------- */
.nox-task-progress { margin-top: 10px; max-width: 460px; }
.nox-task-progress-track {
	height: 8px;
	border-radius: 999px;
	background: var(--nox-line, #E1E8EF);
	overflow: hidden;
}
.nox-task-progress-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--nox-blue, #1554A0), var(--nox-bright, #29ABE2), #1B9C8F);
	transition: width 0.25s ease;
}
.nox-task-progress-label { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--nox-muted, #5B7286); font-weight: 600; }
.is-finished .nox-task-progress-fill { background: #1E9E5A; }

/* --- Mini progress bar on list rows / board cards ------------------- */
.nox-mini-progress {
	display: inline-block;
	vertical-align: middle;
	width: 54px;
	height: 5px;
	margin-left: 6px;
	border-radius: 999px;
	background: var(--nox-line, #E1E8EF);
	overflow: hidden;
}
.nox-mini-progress-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--nox-blue, #1554A0), var(--nox-bright, #29ABE2));
}

/* --- Mention → collaborator confirmation ---------------------------- */
.nox-mention-confirm {
	margin-top: 12px;
	padding: 10px 14px;
	border: 1px solid #BBD8F0;
	border-radius: 10px;
	background: var(--nox-pale, #E8F2FB);
}
.nox-mention-confirm-title { margin: 0 0 8px; font-weight: 600; font-size: 13.5px; color: var(--nox-ink, #0F2233); }
.nox-mention-confirm-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nox-mention-confirm-form { display: inline; }

/* --- Timer states --------------------------------------------------- */
.nox-side-timer-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.nox-timer-state.nox-timer-paused,
em.nox-timer-paused { color: #C08A00; font-weight: 700; font-style: normal; }

/* --- Team boards ----------------------------------------------------- */
.nox-team-boards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
	margin-top: 14px;
}
.nox-team-board-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nox-team-board-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10, 31, 60, 0.12); }
.nox-team-board-main { display: flex; flex-direction: column; min-width: 0; }
.nox-team-board-name { font-weight: 700; color: var(--nox-ink, #0F2233); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nox-team-board-sub { font-size: 12.5px; color: var(--nox-muted, #5B7286); }
.nox-team-board-title { display: flex; align-items: center; gap: 10px; }
.nox-board-drop.is-static { min-height: 40px; }
.nox-board-empty { text-align: center; opacity: 0.5; }

@media (max-width: 720px) {
	.nox-reply-list, .nox-thread-replybox { margin-left: 18px; }
	img.nox-gif { max-width: 100%; }
}

/* --- v0.121.0 — Task edit & delete --------------------------------- */
.nox-danger-zone { border-color: #E8C4BE; }
.nox-danger-zone h2 { color: #C0392B; }
.nox-danger-hint { font-size: 13px; color: var(--nox-muted, #5B7286); }
.nox-danger-label { display: block; font-size: 13px; margin: 10px 0 4px; }
.nox-danger-label code { background: #FBEAE8; padding: 1px 6px; border-radius: 5px; }
.nox-danger-zone input[name="confirm_title"] { width: 100%; margin-bottom: 10px; }
.nox-btn-danger { background: #C0392B; border-color: #C0392B; color: #fff; }
.nox-btn-danger:hover { background: #A93226; }
.nox-locked-field { margin: 4px 0 12px; font-weight: 600; }
.nox-locked-field .nox-field-hint { display: block; font-weight: 400; }

/* ---------------------------------------------------------------------
 * Availability and bookings (v0.122.0)
 * ------------------------------------------------------------------ */

.nox-avail-week {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin-top: 14px;
}
.nox-avail-day {
	background: #FAFCFE;
	border: 1px solid var(--nox-line);
	border-radius: 13px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.nox-avail-day h3 {
	margin: 0;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 13px;
	color: var(--nox-navy-ink);
}
.nox-avail-rows { display: flex; flex-direction: column; gap: 6px; }
.nox-avail-row { display: flex; align-items: center; gap: 5px; }
.nox-avail-row input[type="time"] {
	flex: 1;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid var(--nox-line);
	border-radius: 8px;
	font-size: 12.5px;
	background: var(--nox-white);
}
.nox-avail-dash { color: var(--nox-muted); font-size: 12px; }
.nox-avail-drop {
	border: 0;
	background: transparent;
	color: var(--nox-muted);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	padding: 0 3px;
	border-radius: 6px;
}
.nox-avail-drop:hover { background: #FBEAEA; color: #8E2B22; }
.nox-avail-add { align-self: flex-start; font-size: 12px; padding: 5px 9px; }

.nox-radio-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 13px;
	border: 1px solid var(--nox-line);
	border-radius: 12px;
	margin-bottom: 8px;
	cursor: pointer;
	font-weight: 400;
}
.nox-radio-row:hover { background: #FAFCFE; }
.nox-radio-row input { margin-top: 3px; flex: 0 0 auto; }
.nox-radio-row strong { display: block; font-size: 13.5px; color: var(--nox-ink); }
.nox-radio-row em { display: block; font-style: normal; font-size: 12.5px; color: var(--nox-muted); margin-top: 2px; }

.nox-avail-limits { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.nox-avail-limits label { display: block; font-size: 12.5px; color: var(--nox-muted); margin-bottom: 4px; }
.nox-avail-limits select { padding: 7px 10px; border: 1px solid var(--nox-line); border-radius: 9px; background: var(--nox-white); }

/* ---- Booking ---- */
.nox-book-filters {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.nox-book-filters label { display: block; font-size: 12.5px; color: var(--nox-muted); margin-bottom: 4px; }
.nox-book-filters select,
.nox-book-filters input[type="date"] {
	padding: 8px 11px;
	border: 1px solid var(--nox-line);
	border-radius: 9px;
	background: var(--nox-white);
	font-size: 13.5px;
}

.nox-book-day { padding: 12px 0; border-bottom: 1px solid var(--nox-line); }
.nox-book-day:last-child { border-bottom: 0; }
.nox-book-day h3 {
	margin: 0 0 9px;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 13.5px;
	color: var(--nox-navy-ink);
}
.nox-book-slots { display: flex; flex-wrap: wrap; gap: 7px; }
.nox-book-slot {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 8px 14px;
	border: 1px solid var(--nox-line);
	border-radius: 999px;
	background: var(--nox-white);
	color: var(--nox-ink);
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all .14s ease;
}
.nox-book-slot small { font-weight: 400; font-size: 11px; color: var(--nox-muted); }
.nox-book-slot:hover { border-color: var(--nox-blue); background: var(--nox-pale); color: var(--nox-blue-ink); }
.nox-book-slot.is-chosen {
	background: var(--nox-blue);
	border-color: var(--nox-blue);
	color: var(--nox-white);
}
.nox-book-slot.is-chosen small { color: rgba(255, 255, 255, .8); }

.nox-book-chosen {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 600;
	color: var(--nox-blue-ink);
	background: var(--nox-pale);
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 12px;
}
.nox-book-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nox-book-actions form { display: flex; align-items: center; gap: 5px; margin: 0; }
.nox-book-reason {
	width: 140px;
	padding: 6px 9px;
	border: 1px solid var(--nox-line);
	border-radius: 8px;
	font-size: 12.5px;
}

/* =====================================================================
   v0.123.0 — Feed conversations layer
   Reply threads + compact rich composer in the stream.
   ===================================================================== */

/* Compact composer (feed comment boxes) */
.nox-rte-compact .nox-rte-editor { min-height: 40px; padding: 8px 12px; }
.nox-rte-compact .nox-rte-bar { padding: 2px 4px; }
.nox-rte-compact .nox-rte-btn { min-width: 24px; height: 22px; font-size: 12px; padding: 0 5px; }
.nox-comment-add { align-items: flex-start; }
.nox-comment-add .nox-btn-small,
.nox-comment-add .nox-btn-quiet { margin-top: 6px; }
.nox-comment-add .nox-rte img.nox-gif { max-width: 180px; }

/* Feed reply threads */
.nox-fc-replies {
	margin: 2px 0 6px 40px;
	padding-left: 12px;
	border-left: 2px solid var(--nox-line, #E1E8EF);
}
.nox-fc-reply .nox-comment-bubble { font-size: 0.95em; }
.nox-fc-reply-btn {
	border: none;
	background: transparent;
	padding: 2px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--nox-muted, #5B7286);
	cursor: pointer;
}
.nox-fc-reply-btn:hover { color: var(--nox-blue-ink, #1554A0); }
.nox-fc-replybox { margin: 4px 0 10px 40px; }
.nox-fc-cancel { font-size: 12px; }

/* Rich bodies inside feed bubbles + posts */
.nox-comment-bubble .nox-comment-text,
.nox-post-body .nox-comment-text { display: block; }
.nox-post-body img.nox-gif { max-width: 320px; max-height: 280px; }

@media (max-width: 720px) {
	.nox-fc-replies, .nox-fc-replybox { margin-left: 16px; }
}

/* =====================================================================
   v0.125.0 — Feed visual distinction
   The composer reads as a "write here" surface, posts stay content
   cards; images show in full. Appended last to win by cascade.
   ===================================================================== */

/* --- Composer: a distinct branded surface --------------------------- */
.nox-card.nox-composer {
	position: relative;
	background: linear-gradient(180deg, #F2F8FE 0%, #FFFFFF 78%);
	border: 1px solid #CBE2F4;
	border-radius: 18px;
	padding: 0 16px 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(10, 31, 60, 0.04), 0 8px 22px rgba(21, 84, 160, 0.08);
}
/* Aurora bar across the top — the compose signal. */
.nox-card.nox-composer::before {
	content: "";
	display: block;
	height: 4px;
	margin: 0 -16px 0;
	background: linear-gradient(90deg, var(--nox-blue, #1554A0), var(--nox-bright, #29ABE2), #1B9C8F);
}
.nox-composer-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--nox-blue-ink, #1554A0);
}
.nox-composer-head-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--nox-pale, #E8F2FB);
	color: var(--nox-blue-ink, #1554A0);
}
.nox-composer .nox-composer-top textarea,
.nox-composer .nox-rte-editor {
	background: #FFFFFF;
	border-color: #D5E6F5;
}
/* Posts stay plain white cards — the contrast does the work. */
.nox-card.nox-post { background: #FFFFFF; }

/* --- Images: show the whole picture --------------------------------- */
/* Single image: natural aspect, never cropped; letterboxed on a deep
   navy backdrop when very tall. */
.nox-post-media.n1 { background: #0E1D33; border-radius: 14px; }
.nox-post-media.n1 .nox-post-img {
	max-height: none;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}
.nox-post-media.n1 .nox-post-img img {
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: contain;
}
.nox-post-media.n1 .nox-post-img:hover img { transform: none; }

/* Grid thumbnails: taller, with an expand hint on hover — the full view
   is one click away in the lightbox. */
.nox-post-media.n2 .nox-post-img,
.nox-post-media.n4 .nox-post-img { height: 230px; }
.nox-post-media.n3 { grid-auto-rows: 165px; }
.nox-post-img { position: relative; }
.nox-post-img::after {
	content: "";
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background-color: rgba(10, 31, 60, 0.55);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}
.nox-post-img:hover::after { opacity: 1; }
.nox-post-media.n1 .nox-post-img::after { opacity: 0.75; }

/* More than four images: show four, badge the fourth, lightbox cycles all. */
.nox-post-media .nox-post-img:nth-child(n+5) { display: none; }
.nox-post-img.is-more::before {
	content: attr(data-more);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 31, 60, 0.55);
	color: #FFFFFF;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.03em;
	z-index: 1;
}
.nox-post-img.is-more::after { display: none; }

@media (max-width: 720px) {
	.nox-post-media.n1 .nox-post-img img { max-height: 420px; }
	.nox-post-media.n2 .nox-post-img,
	.nox-post-media.n4 .nox-post-img { height: 160px; }
}

/* --- v0.126.0 — Project feed: task activity -------------------------- */
.nox-pact {
	margin: 0 0 14px;
	border: 1px solid var(--nox-line, #E1E8EF);
	border-radius: 12px;
	background: #FAFCFE;
	overflow: hidden;
}
.nox-pact-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--nox-ink, #0F2233);
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.nox-pact-head::-webkit-details-marker { display: none; }
.nox-pact-head::before { content: "▸"; font-size: 11px; color: var(--nox-muted, #5B7286); transition: transform 0.15s ease; }
.nox-pact[open] .nox-pact-head::before { transform: rotate(90deg); }
.nox-pact-n {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--nox-pale, #E8F2FB);
	color: var(--nox-blue-ink, #1554A0);
	font-size: 11.5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.nox-pact-list { border-top: 1px solid var(--nox-line, #E1E8EF); max-height: 320px; overflow-y: auto; }
.nox-pact-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 14px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid #EEF3F8;
	transition: background 0.12s ease;
}
.nox-pact-row:last-child { border-bottom: none; }
.nox-pact-row:hover { background: var(--nox-pale, #E8F2FB); }
.nox-pact-row .nox-ava { flex: 0 0 auto; margin-top: 1px; }
.nox-pact-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; }
.nox-pact-txt strong { font-weight: 700; }
.nox-pact-quote {
	display: block;
	margin-top: 2px;
	color: var(--nox-muted, #5B7286);
	font-style: italic;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.nox-pact-when { flex: 0 0 auto; font-size: 11.5px; color: var(--nox-muted, #5B7286); margin-top: 2px; white-space: nowrap; }
.nox-pact-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	margin-right: 6px;
	vertical-align: middle;
	background: var(--nox-muted, #5B7286);
}
.nox-pact-open        { background: #1554A0; }
.nox-pact-in_progress { background: #29ABE2; }
.nox-pact-blocked     { background: #C0392B; }
.nox-pact-done        { background: #1E9E5A; }

/* =====================================================================
   v0.127.0 — Project roles grid (Asana-style) + project dashboard
   ===================================================================== */

/* --- Roles grid ------------------------------------------------------ */
.nox-proles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px 16px;
	margin: 6px 0 12px;
}
.nox-prole {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 12px;
	transition: background 0.12s ease;
}
.nox-prole:hover { background: var(--nox-pale, #E8F2FB); }
.nox-prole .nox-ava { flex: 0 0 auto; }
.nox-prole-main { display: flex; flex-direction: column; min-width: 0; }
.nox-prole-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nox-ink, #0F2233);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nox-prole-role { font-size: 11.5px; color: var(--nox-muted, #5B7286); }
.nox-prole-remove { position: absolute; top: 4px; right: 6px; opacity: 0; transition: opacity 0.12s ease; }
.nox-prole:hover .nox-prole-remove { opacity: 1; }

/* "Add member" ghost circle */
.nox-prole-add { border: none; background: transparent; cursor: pointer; text-align: left; font: inherit; }
.nox-prole-addcircle {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 2px dashed #B9CFE2;
	color: var(--nox-muted, #5B7286);
	font-size: 20px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.12s ease, color 0.12s ease;
}
.nox-prole-addname { color: var(--nox-muted, #5B7286); font-weight: 600; }
.nox-prole-add:hover .nox-prole-addcircle { border-color: var(--nox-blue, #1554A0); color: var(--nox-blue-ink, #1554A0); }
.nox-prole-add:hover .nox-prole-addname { color: var(--nox-blue-ink, #1554A0); }

/* --- Project dashboard ----------------------------------------------- */
.nox-pdash-kpis { margin-bottom: 16px; }
.nox-chart-donut { position: relative; }
.nox-donut-center {
	position: absolute;
	top: 44%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--nox-font-head, inherit);
	font-size: 26px;
	font-weight: 800;
	color: var(--nox-navy-ink, #0A1F3C);
	pointer-events: none;
}

/* v0.127.0 fixes: hidden add-form must stay hidden; dashboard KPIs fixed 4-up. */
.nox-people-form[hidden] { display: none; }
.nox-pdash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 860px) { .nox-pdash-kpis { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   v0.128.0 — Task drawer (Asana-style side panel)
   ===================================================================== */
.nox-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: rgba(6, 15, 28, 0.35);
}
.nox-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 3001;
	width: min(680px, 96vw);
	background: #FFFFFF;
	box-shadow: -12px 0 40px rgba(10, 31, 60, 0.18);
	transform: translateX(100%);
	transition: transform 0.18s ease;
	display: flex;
	flex-direction: column;
}
.nox-drawer.is-in { transform: translateX(0); }
.nox-drawer-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--nox-line, #E1E8EF);
	background: #F7FAFD;
	flex: 0 0 auto;
}
.nox-drawer-expand {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--nox-blue-ink, #1554A0);
	text-decoration: none;
}
.nox-drawer-expand:hover { text-decoration: underline; }
.nox-drawer-close {
	border: none;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: var(--nox-muted, #5B7286);
	cursor: pointer;
	padding: 0 4px;
	border-radius: 8px;
}
.nox-drawer-close:hover { background: var(--nox-pale, #E8F2FB); color: var(--nox-ink, #0F2233); }
.nox-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 40px; }
body.nox-drawer-open { overflow: hidden; }

/* The fragment inside the drawer: stack the two-column task layout,
   hide page chrome that makes no sense in a panel. */
.nox-drawer .nox-panel-frag .nox-breadcrumb { display: none; }
.nox-drawer .nox-panel-frag .nox-task-layout { display: block; }
.nox-drawer .nox-panel-frag .nox-task-side { margin-top: 18px; }
.nox-drawer .nox-panel-frag h1 { font-size: 20px; }
.nox-drawer .nox-panel-frag img.nox-gif { max-width: 200px; }

@media (max-width: 720px) {
	.nox-drawer { width: 100vw; }
}
.nox-drawer[hidden], .nox-drawer-backdrop[hidden] { display: none; }

/* =====================================================================
   v0.129.0 — Drawer section differentiation + task people grid
   Each block inside the task panel gets its own accent + tinted header,
   so the eye can tell Description / Subtasks / Checklist / Activity /
   Details / People apart at a glance.
   ===================================================================== */

/* Busy state while a panel action posts. */
.nox-drawer-body.is-busy { opacity: 0.55; pointer-events: none; }

/* Shared header-strip treatment inside the panel. */
.nox-drawer .nox-panel-frag section.nox-card { border-left: 4px solid transparent; }
.nox-drawer .nox-panel-frag section.nox-card > .nox-section-h,
.nox-drawer .nox-panel-frag section.nox-card > .nox-subhead {
	margin: -22px -26px 14px;
	padding: 11px 26px 11px 18px;
	border-radius: 12px 12px 0 0;
	font-size: 13px;
	letter-spacing: 0.02em;
}
.nox-drawer .nox-panel-frag .nox-subhead .nox-section-h { margin: 0; padding: 0; background: none; }

/* Description — quiet paper. */
.nox-drawer .nox-panel-frag .nox-task-main > section.nox-card:not(.nox-subtasks):not(.nox-checklist):not(.nox-activity) {
	border-left-color: #B9CFE2;
	background: #FBFCFE;
}
.nox-drawer .nox-panel-frag .nox-task-main > section.nox-card:not(.nox-subtasks):not(.nox-checklist):not(.nox-activity) > .nox-section-h {
	background: #F0F5FA;
	color: #4A6076;
}

/* Subtasks — tasks cyan. */
.nox-drawer .nox-panel-frag section.nox-card.nox-subtasks { border-left-color: #29ABE2; }
.nox-drawer .nox-panel-frag .nox-subtasks > .nox-subhead,
.nox-drawer .nox-panel-frag .nox-subtasks > .nox-section-h { background: #E8F6FC; color: #0E6E9E; }

/* Checklist — teal. */
.nox-drawer .nox-panel-frag section.nox-card.nox-checklist { border-left-color: #1B9C8F; }
.nox-drawer .nox-panel-frag .nox-checklist > .nox-subhead,
.nox-drawer .nox-panel-frag .nox-checklist > .nox-section-h { background: #E6F5F3; color: #116B62; }

/* Activity (comments · attachments · time) — brand blue. */
.nox-drawer .nox-panel-frag section.nox-card.nox-activity { border-left-color: #1554A0; }
.nox-drawer .nox-panel-frag .nox-activity .nox-tabs { background: #EDF3FA; border-radius: 10px; padding: 4px; }

/* Sidebar: Details — navy. */
.nox-drawer .nox-panel-frag .nox-task-side > .nox-side-card:not(.nox-danger-zone) { border-left-color: #0A1F3C; }
.nox-drawer .nox-panel-frag .nox-task-side > .nox-side-card:not(.nox-danger-zone) > .nox-section-h { background: #EEF1F6; color: #0A1F3C; }

/* People — team violet. */
.nox-drawer .nox-panel-frag section.nox-card.nox-people { border-left-color: #7A5AF8; }
.nox-drawer .nox-panel-frag .nox-people > .nox-section-h { background: #F1EDFE; color: #4B36B0; }

/* Danger zone — red (heading strip to match). */
.nox-drawer .nox-panel-frag section.nox-card.nox-danger-zone { border-left-color: #C0392B; }
.nox-drawer .nox-panel-frag .nox-danger-zone > h2 {
	margin: -22px -26px 14px;
	padding: 11px 26px 11px 18px;
	border-radius: 12px 12px 0 0;
	background: #FBEAE8;
	font-size: 13px;
}

/* Task people grid: slightly tighter than the project one. */
.nox-proles-task { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.nox-proles-task .nox-prole-role { font-size: 11px; }

/* --- v0.131.0 — Task hero: owner + collaborator strip ---------------- */
.nox-hero-people {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 10px;
}
.nox-hero-owner { display: flex; align-items: center; gap: 10px; }
.nox-hero-owner .nox-ava { flex: 0 0 auto; box-shadow: 0 0 0 2px #FFFFFF, 0 1px 4px rgba(10, 31, 60, 0.18); }
.nox-hero-owner-main { display: flex; flex-direction: column; line-height: 1.2; }
.nox-hero-owner-name { font-size: 14px; font-weight: 700; color: var(--nox-ink, #0F2233); }
.nox-hero-owner-lbl { font-size: 11px; color: var(--nox-muted, #5B7286); text-transform: uppercase; letter-spacing: 0.05em; }
.nox-hero-collabs { display: flex; align-items: center; padding-left: 4px; }
.nox-hero-collab { display: inline-flex; margin-left: -7px; border-radius: 999px; transition: transform 0.12s ease; }
.nox-hero-collab:first-child { margin-left: 0; }
.nox-hero-collab .nox-ava { box-shadow: 0 0 0 2px #FFFFFF; width: 24px; height: 24px; font-size: 10px; }
.nox-hero-collab:hover { transform: translateY(-2px); z-index: 1; position: relative; }

/* --- v0.132.0 — Hero actions as colored icon buttons ------------------ */
.nox-hero-icons { display: flex; align-items: center; gap: 8px; }
.nox-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid var(--nox-line, #E1E8EF);
	background: #FFFFFF;
	cursor: pointer;
	padding: 0;
	transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.nox-icon-btn svg { width: 18px; height: 18px; display: block; }
.nox-icon-btn:hover { transform: translateY(-1px); }
.nox-icon-edit { color: #1554A0; }
.nox-icon-edit:hover { background: #E8F2FB; border-color: #1554A0; }
.nox-icon-archive { color: #C08A00; }
.nox-icon-archive:hover { background: #FBF3E0; border-color: #C08A00; }
.nox-icon-restore { color: #1E9E5A; }
.nox-icon-restore:hover { background: #E7F6EE; border-color: #1E9E5A; }

/* v0.133.0 — .nox-card p { margin: 0 } was beating .nox-overdue-banner's
   top margin (0,1,1 vs 0,1,0), gluing the banner to the avatar strip. */
.nox-card p.nox-overdue-banner { margin: 14px 0 0; }
.nox-hero-people { margin-bottom: 2px; }

/* --- v0.135.0 — Clickable notifications ------------------------------- */
.nox-notif-list li { padding: 0; }
.nox-notif-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
	transition: background 0.12s ease;
}
.nox-notif-link:hover { background: var(--nox-pale, #E8F2FB); }
.nox-notif-msg { flex: 1; min-width: 0; }
.nox-notif-list .nox-unread .nox-notif-msg { font-weight: 700; }
.nox-notif-go { flex: 0 0 auto; color: var(--nox-muted, #5B7286); opacity: 0; transition: opacity 0.12s ease; }
.nox-notif-link:hover .nox-notif-go { opacity: 1; color: var(--nox-blue-ink, #1554A0); }

/* A notification whose subject has been deleted. It is rendered as a span
   rather than a link, so it must also LOOK unclickable — no hover lift, and
   a tag saying why, instead of a chevron promising somewhere to go. */
.nox-notif-list li.nox-notif-gone .nox-notif-msg { color: var(--nox-muted, #5B7286); }
span.nox-notif-link { cursor: default; }
span.nox-notif-link:hover { background: none; }
.nox-notif-gone-tag {
	flex: 0 0 auto; font-size: 11px; font-weight: 600;
	color: var(--nox-muted, #5B7286); border: 1px solid var(--nox-line);
	border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}

/* --- v0.137.0 — Shopify orders report screen -------------------------- */
.nox-orders-filters .nox-of-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px 14px;
	align-items: end;
}
.nox-orders-filters label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--nox-muted, #5B7286); font-weight: 600; }
.nox-orders-filters select,
.nox-orders-filters input { padding: 8px 10px; border: 1px solid var(--nox-line, #E1E8EF); border-radius: 9px; font: inherit; background: #FFF; }
.nox-of-actions { display: flex; gap: 8px; align-items: center; }
.nox-of-hint { margin: 10px 0 0; font-size: 12px; color: var(--nox-muted, #5B7286); }
.nox-orders-kpis { margin: 14px 0 16px; }
.nox-orders-kpis .nox-kpi-value { font-size: 20px; }
.nox-orders-table th a { color: inherit; text-decoration: none; }
.nox-orders-table th a:hover { color: var(--nox-blue-ink, #1554A0); text-decoration: underline; }
.nox-orders-table td.nox-num, .nox-orders-table th.nox-num { text-align: right; }
.nox-code-badge { background: #E7F6EE; color: #14743F; border: 1px solid #BCE5CE; font-weight: 700; }
.nox-table-wrap { overflow-x: auto; }

/* v0.138.0 — Inventory report status badges */
.nox-stock-ok  { background: #E7F6EE; color: #14743F; border: 1px solid #BCE5CE; }
.nox-stock-low { background: #FBF3E0; color: #8A5A00; border: 1px solid #EBD9A8; }
.nox-stock-out { background: #FBEAE8; color: #922B21; border: 1px solid #F3C6C0; }

/* =====================================================================
 * v0.140.0 — Partners module (commercial network)
 * ===================================================================== */
:root { --mod-partners: #B23A48; }
.nox-mod-partners { --mod: var(--mod-partners); --nox-mod: #B23A48; }
.nox-mod-partners .nox-ico, .nox-mod-partners .nox-nav-ic { color: #B23A48; }

/* KPI alert tint (overdue follow-ups) */
.nox-ptn-metric-alert .nox-att-metric-val { color: #C0392B; }

/* Two side-by-side dashboard panels; stack on narrow screens */
.nox-ptn-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .nox-ptn-panels { grid-template-columns: 1fr; } }

/* Follow-ups + activity lists */
.nox-ptn-follow, .nox-ptn-activity { list-style: none; margin: 0; padding: 0; }
.nox-ptn-follow li, .nox-ptn-activity li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--nox-line); }
.nox-ptn-follow li:last-child, .nox-ptn-activity li:last-child { border-bottom: 0; }
.nox-ptn-follow-date, .nox-ptn-act-date { flex: 0 0 44px; font-size: 12px; font-weight: 600; color: var(--nox-muted); }
.nox-ptn-follow-overdue .nox-ptn-follow-date { color: #C0392B; }
.nox-ptn-follow-body, .nox-ptn-act-body { flex: 1; min-width: 0; }
.nox-ptn-follow-body small, .nox-ptn-act-body small { display: block; color: var(--nox-muted); }
.nox-ptn-doclink { margin-left: 6px; white-space: nowrap; }

/* Directory card grid */
.nox-ptn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.nox-ptn-card { display: block; background: #fff; border: 1px solid var(--nox-line); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: var(--nox-ink); box-shadow: 0 1px 2px rgba(10,31,60,.05); transition: box-shadow .15s ease, transform .15s ease; }
.nox-ptn-card:hover { box-shadow: 0 6px 18px rgba(10,31,60,.10); transform: translateY(-1px); }
.nox-ptn-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nox-ptn-card-top strong { font-size: 15px; }
.nox-ptn-card-co { color: var(--nox-muted); font-size: 13px; margin-top: 2px; }
.nox-ptn-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--nox-muted); }
.nox-ptn-card-dates { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 12.5px; color: var(--nox-muted); }
.nox-ptn-card-dates strong { color: var(--nox-ink); font-weight: 600; }

/* Filters bar */
.nox-ptn-filters form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nox-ptn-filters input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.nox-ptn-filters select { max-width: 200px; }

/* Tier badge */
.nox-tier-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--nox-ink); background: var(--nox-pale); border-radius: 999px; padding: 2px 10px 2px 6px; }
.nox-tier-ico { display: inline-flex; align-items: center; }
.nox-tier-ico svg { width: 16px; height: 16px; display: block; }
.nox-ptn-tier-cell .nox-tier-ico svg { width: 22px; height: 22px; }

/* Detail two-column layout */
.nox-ptn-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .nox-ptn-cols { grid-template-columns: 1fr; } }
.nox-ptn-main > .nox-card, .nox-ptn-side > .nox-card { margin-bottom: 16px; }

/* Definition lists on the ficha */
.nox-ptn-dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 0; }
.nox-ptn-dl dt { color: var(--nox-muted); font-size: 12.5px; font-weight: 600; }
.nox-ptn-dl dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }

/* Inline add forms (details/summary) */
.nox-ptn-add { margin-bottom: 12px; }
.nox-ptn-add summary { cursor: pointer; display: inline-block; }
.nox-ptn-inline-form { margin-top: 10px; padding: 12px; background: var(--nox-pale); border-radius: 10px; }
.nox-ptn-inline-form label { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--nox-muted); }
.nox-ptn-inline-form input, .nox-ptn-inline-form select, .nox-ptn-inline-form textarea { width: 100%; margin-top: 3px; font-weight: 400; }
.nox-ptn-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }

/* Idents list + quick add */
.nox-ptn-idents { list-style: none; margin: 0 0 10px; padding: 0; }
.nox-ptn-idents li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--nox-line); }
.nox-ptn-idents li:last-child { border-bottom: 0; }
.nox-ptn-idents code { background: var(--nox-pale); border-radius: 6px; padding: 2px 8px; font-size: 12.5px; }
.nox-ptn-idents form { margin-left: auto; }
.nox-ptn-ident-add { display: flex; gap: 6px; flex-wrap: wrap; }
.nox-ptn-ident-add input { flex: 1 1 120px; min-width: 100px; }

/* Levels config */
.nox-ptn-svg-input { width: 100%; margin-top: 4px; font-family: monospace; font-size: 11.5px; }
.nox-ptn-order-input { width: 70px; }
.nox-ptn-hint { font-size: 12.5px; margin-top: 8px; }

/* v0.141.0 — Partners phase 2 */
.nox-ptn-comm-status select { font-size: 12.5px; padding: 2px 6px; }
.nox-ptn-proj-edit summary { cursor: pointer; }
.nox-ptn-proj-edit .nox-ptn-inline-form { min-width: 260px; }

/* v0.142.0 — form-card was never styling email/number/tel/search inputs
 * (only text/date/time/url), so those fields rendered browser-default
 * (the narrow Email box on the partner form). Mirror the exact
 * text-input look for every remaining textual input type. */
.nox-form-card input[type="email"],
.nox-form-card input[type="number"],
.nox-form-card input[type="tel"],
.nox-form-card input[type="search"],
.nox-form-card input[type="password"] {
	width: 100%;
	max-width: 760px;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--nox-line);
	border-radius: 6px;
	background: var(--nox-pale);
	color: var(--nox-ink);
	font: inherit;
}
.nox-form-card input[type="email"]:focus,
.nox-form-card input[type="number"]:focus,
.nox-form-card input[type="tel"]:focus,
.nox-form-card input[type="search"]:focus,
.nox-form-card input[type="password"]:focus {
	background: var(--nox-white);
	border-color: var(--nox-bright);
}

/* v0.143.0 — Partners visual pass: logos/avatars + card identity row */
.nox-ptn-card-id { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.nox-ptn-card-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-ptn-card-id .nox-ava { flex: 0 0 auto; border-radius: 10px; }
.nox-ptn-hero { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nox-ptn-hero .nox-ava { border-radius: 10px; }
.nox-ptn-logo-field { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.nox-ptn-logo-field .nox-ava { border-radius: 12px; flex: 0 0 auto; }
.nox-ptn-logo-field input[type="file"] { font-size: 13px; }
.nox-ptn-remove-logo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--nox-muted); margin-top: 6px; }

/* =====================================================================
 * v0.145.0 — Partners visual supercharge
 * Cohesive KPI strip, avatar activity feed, toolbar polish, richer cards.
 * Appended last so it wins by cascade order at equal specificity.
 * ===================================================================== */

/* ---- KPI strip -------------------------------------------------- */
.nox-ptn-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}
.nox-ptn-kpi {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #fff;
	border: 1px solid var(--nox-line);
	border-radius: 14px;
	padding: 14px 16px 12px;
	text-decoration: none;
	color: var(--nox-ink);
	box-shadow: 0 1px 2px rgba(10, 31, 60, .05);
	overflow: hidden;
	transition: box-shadow .15s ease, transform .15s ease;
}
.nox-ptn-kpi::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	background: var(--nox-line);
	opacity: .55;
}
.nox-ptn-kpi.is-primary::before { background: linear-gradient(90deg, #B23A48, #d76a76); opacity: 1; }
.nox-ptn-kpi.is-alert::before { background: #C43D3D; opacity: 1; }
a.nox-ptn-kpi:hover { box-shadow: 0 8px 22px rgba(10, 31, 60, .12); transform: translateY(-2px); }
.nox-ptn-kpi-val {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	color: var(--nox-navy-ink);
	font-variant-numeric: tabular-nums;
}
.nox-ptn-kpi.is-alert .nox-ptn-kpi-val { color: #C43D3D; }
.nox-ptn-kpi-lbl {
	font-size: 12px;
	font-weight: 600;
	color: var(--nox-ink);
	letter-spacing: .01em;
}
.nox-ptn-kpi-sub { font-size: 11.5px; color: var(--nox-muted); }
.nox-ptn-kpi.is-primary .nox-ptn-kpi-sub { color: #B23A48; font-weight: 600; }

/* ---- Panels: follow-ups + activity ------------------------------ */
.nox-ptn-emptystate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 34px 18px;
	text-align: center;
	color: var(--nox-muted);
}
.nox-ptn-emptystate svg { width: 34px; height: 34px; color: var(--nox-bright); opacity: .8; }
.nox-ptn-emptystate strong { color: var(--nox-ink); font-size: 14px; }
.nox-ptn-emptystate span { font-size: 12.5px; max-width: 320px; }

.nox-ptn-feed { list-style: none; margin: 0; padding: 0; }
.nox-ptn-feed-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 2px;
	border-bottom: 1px solid rgba(225, 232, 239, .6);
}
.nox-ptn-feed-row:last-child { border-bottom: 0; }
.nox-ptn-feed-row .nox-ava { flex: 0 0 auto; border-radius: 9px; }
.nox-ptn-feed-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.nox-ptn-feed-name {
	font-weight: 600;
	font-size: 13.5px;
	color: var(--nox-navy-ink);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nox-ptn-feed-name:hover { color: var(--nox-blue-ink); text-decoration: underline; }
.nox-ptn-feed-desc { font-size: 12.5px; color: var(--nox-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-ptn-feed-date { flex: 0 0 auto; font-size: 11.5px; color: var(--nox-muted); background: var(--nox-pale); border-radius: 999px; padding: 3px 9px; }

/* Follow-up rows inherit the same rhythm */
.nox-ptn-follow li { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid rgba(225, 232, 239, .6); }
.nox-ptn-follow li:last-child { border-bottom: 0; }
.nox-ptn-follow-date { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--nox-navy-ink); background: var(--nox-pale); border-radius: 999px; padding: 3px 9px; }
.nox-ptn-follow-overdue .nox-ptn-follow-date { background: #FBE9E9; color: #C43D3D; }
.nox-ptn-follow-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.nox-ptn-follow-body a { font-weight: 600; font-size: 13.5px; color: var(--nox-navy-ink); text-decoration: none; }
.nox-ptn-follow-body a:hover { color: var(--nox-blue-ink); text-decoration: underline; }
.nox-ptn-follow-body small { font-size: 12.5px; color: var(--nox-muted); }

/* ---- Index toolbar ---------------------------------------------- */
.nox-ptn-filters { padding: 12px 14px; }
.nox-ptn-filters form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nox-ptn-filters input[type="search"] {
	flex: 1 1 260px;
	min-width: 200px;
	height: 38px;
	box-sizing: border-box;
	padding: 0 12px 0 36px;
	border: 1px solid var(--nox-line);
	border-radius: 10px;
	background-color: var(--nox-pale);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B7286' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: 12px center;
	font: inherit;
	color: var(--nox-ink);
	-webkit-appearance: none;
	appearance: none;
}
.nox-ptn-filters input[type="search"]:focus { outline: none; background-color: #fff; border-color: var(--nox-bright); }
.nox-ptn-filters select {
	height: 38px;
	box-sizing: border-box;
	padding: 0 30px 0 12px;
	border: 1px solid var(--nox-line);
	border-radius: 10px;
	background: var(--nox-pale);
	font: inherit;
	font-size: 13px;
	color: var(--nox-ink);
	max-width: 220px;
}
.nox-ptn-filters select:focus { outline: none; background: #fff; border-color: var(--nox-bright); }
.nox-ptn-filters .nox-btn { height: 38px; padding: 0 18px; }

/* ---- Cards ------------------------------------------------------- */
.nox-ptn-grid { gap: 16px; }
.nox-ptn-card { padding: 16px; border-radius: 16px; }
.nox-ptn-card:hover { box-shadow: 0 10px 26px rgba(10, 31, 60, .12); transform: translateY(-2px); border-color: rgba(178, 58, 72, .35); }
.nox-ptn-card-top { align-items: flex-start; }
.nox-ptn-card-id { align-items: center; gap: 12px; }
.nox-ptn-card-id .nox-ava { border-radius: 12px; }
.nox-ptn-card-names { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nox-ptn-card-names strong { font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-ptn-card-names small { font-size: 12.5px; color: var(--nox-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-ptn-card-meta { margin-top: 10px; }
.nox-ptn-card-loc { display: inline-flex; align-items: center; gap: 5px; }
.nox-ptn-card-loc svg { width: 13px; height: 13px; color: var(--nox-bright); flex: 0 0 auto; }
.nox-ptn-card-foot {
	display: flex;
	gap: 18px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(225, 232, 239, .7);
}
.nox-ptn-card-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nox-ptn-card-stat small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--nox-muted); }
.nox-ptn-card-stat strong { font-size: 12.5px; color: var(--nox-ink); font-weight: 600; }
.nox-ptn-card-stat em { font-style: normal; color: var(--nox-muted); font-weight: 400; }

/* v0.147.0 — Partners: per-platform socials, hero link row, CSV export */
.nox-ptn-hero-txt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.nox-ptn-social { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.nox-ptn-social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	border: 1px solid var(--nox-line);
	background: #fff;
	color: var(--nox-muted);
	transition: color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.nox-ptn-social-btn svg { width: 16px; height: 16px; }
.nox-ptn-social-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(10, 31, 60, .12); }
.nox-ptn-social-btn.is-website:hover { color: var(--nox-blue-ink); border-color: var(--nox-blue); }
.nox-ptn-social-btn.is-instagram:hover { color: #C13584; border-color: #C13584; }
.nox-ptn-social-btn.is-linkedin:hover { color: #0A66C2; border-color: #0A66C2; }
.nox-ptn-social-btn.is-facebook:hover { color: #1877F2; border-color: #1877F2; }
.nox-ptn-social-btn.is-youtube:hover { color: #DC2626; border-color: #DC2626; }
.nox-ptn-social-btn.is-tiktok:hover { color: var(--nox-navy-ink); border-color: var(--nox-navy); }

.nox-ptn-socialset { border: 1px solid var(--nox-line); border-radius: 12px; padding: 12px 14px 6px; margin: 0 0 14px; }
.nox-ptn-socialset legend { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nox-muted); padding: 0 6px; }
.nox-ptn-socialgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.nox-ptn-socialfield { display: flex; flex-direction: column; gap: 4px; }
.nox-ptn-socialtag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--nox-ink); }
.nox-ptn-socialtag svg { width: 14px; height: 14px; color: var(--nox-muted); }
.nox-ptn-socialfield input { margin-bottom: 6px; }

/* Multi-pick grids on the partner form: languages, and the distributors an
   associate sells through. A wrapping grid of checkboxes rather than a
   multi-select box, because a <select multiple> hides most of its options
   and needs ctrl-click to add a second one — the exact interaction people
   get wrong when they mean "and also". */
.nox-ptn-langs {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 6px 12px; margin: 0 0 6px;
}
.nox-ptn-lang {
	display: flex; align-items: baseline; gap: 7px;
	font-size: 13.5px; font-weight: 400; margin: 0; padding: 3px 0; cursor: pointer;
}
.nox-ptn-lang input { margin: 0; flex: none; }
.nox-ptn-lang small { display: block; font-size: 11.5px; }
.nox-ptn-distwrap { margin-bottom: 14px; }

/* Reach chips on the ficha and directory cards. */
.nox-ptn-reach { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; }
.nox-ptn-reach .nox-pill { margin: 0; }

/* Reach lists: a label, a two-tone bar, a count. A bar chart would need
   Chart.js for six rows and could not carry a link on each label, and the
   whole point of these panels is to be a way INTO the filtered directory. */
.nox-ptn-reachlist { list-style: none; margin: 0; padding: 0; }
.nox-ptn-reachlist li {
	display: grid; grid-template-columns: minmax(90px, 1fr) minmax(70px, 2fr) auto;
	align-items: center; gap: 10px; padding: 6px 0;
}
.nox-ptn-reach-lbl { font-size: 13.5px; font-weight: 600; }
.nox-ptn-reach-bar {
	display: flex; height: 9px; border-radius: 999px; overflow: hidden;
	background: var(--nox-line); min-width: 40px;
}
.nox-ptn-reach-d { background: #B23A48; }
.nox-ptn-reach-a { background: #29ABE2; }
.nox-ptn-reach-n { font-size: 12px; color: var(--nox-muted); white-space: nowrap; }

/* Gap and ranking lists — one row, a link, then whatever qualifies it. */
.nox-ptn-gaph {
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--nox-muted); margin: 14px 0 4px;
}
.nox-ptn-gaph:first-child { margin-top: 0; }
.nox-ptn-gaplist { list-style: none; margin: 0; padding: 0; }
.nox-ptn-gaplist li {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 6px 0; border-bottom: 1px solid var(--nox-line); font-size: 13.5px;
}
.nox-ptn-gaplist li:last-child { border-bottom: 0; }
.nox-ptn-gaplist li > a { font-weight: 600; }
.nox-ptn-gaplist li > strong { margin-left: auto; }
.nox-ptn-gaplist li > .nox-pill { margin-left: auto; }
.nox-ptn-gaplist li > small { flex: none; }

.nox-ptn-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; }
.nox-ptn-quiet-when { margin-left: auto; font-size: 12px; white-space: nowrap; }

/* "Who sells through this distributor" — the reverse of the associate link. */
.nox-ptn-sellers { list-style: none; margin: 0; padding: 0; }
.nox-ptn-sellers li {
	display: flex; align-items: center; gap: 9px;
	padding: 7px 0; border-bottom: 1px solid var(--nox-line);
}
.nox-ptn-sellers li:last-child { border-bottom: 0; }
.nox-ptn-sellers .nox-pill { margin-left: auto; }

.nox-ptn-card-langs {
	font-size: 11px; font-weight: 700; letter-spacing: .04em;
	color: var(--nox-muted); white-space: nowrap;
}

.nox-ptn-card-social { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.nox-ptn-card-socialdot { display: inline-flex; color: var(--nox-muted); opacity: .75; }
.nox-ptn-card-socialdot svg { width: 13px; height: 13px; }
.nox-ptn-export { margin-left: auto; }

/* v0.148.0 — Quick comm logging + follow-ups on My Calendar */
.nox-ptn-logbtn { background: linear-gradient(135deg, #B23A48, #C95563); }
.nox-ptn-logbtn:hover { background: linear-gradient(135deg, #9F3340, #B23A48); }
/* Restated at the end of the cascade: the v0.245.0 button system sets
   `background` on .nox-btn further down the file and had been flattening
   this accent to plain blue since. */
.nox-btn.nox-ptn-logbtn { background: linear-gradient(135deg, #B23A48, #C95563); color: var(--nox-white); }
.nox-btn.nox-ptn-logbtn:hover { background: linear-gradient(135deg, #9F3340, #B23A48); color: var(--nox-white); }
summary.nox-ptn-logbtn { display: inline-block; cursor: pointer; list-style: none; }
summary.nox-ptn-logbtn::-webkit-details-marker { display: none; }
.nox-ptn-follow-log { flex: 0 0 auto; font-size: 12px; padding: 3px 10px; }
.nox-ptn-logcard { max-width: 860px; }
.nox-cal-chip-ptnf { --nox-ev: #B23A48; border-left: 3px solid #B23A48; background: #F9ECEE; color: #7C2934; text-decoration: none; }
.nox-cal-chip-ptnf.is-overdue { background: #FBE3E3; border-left-color: #C43D3D; color: #A02F2F; font-weight: 600; }
.nox-cal-chip-ptnf:hover { filter: brightness(0.97); }

/* v0.151.0 — CS ticket: Manage card layout, collaborators, comment spacing */
.nox-cs-manage form { display: flex; flex-direction: column; gap: 14px; }
.nox-cs-manage .nox-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0; }
.nox-cs-manage label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nox-muted); margin: 0 0 4px; }
.nox-cs-manage select,
.nox-cs-manage textarea {
	width: 100%;
	max-width: none;
	border: 1px solid var(--nox-line);
	border-radius: 6px;
	background: var(--nox-pale);
	padding: 9px 12px;
	font: inherit;
	color: var(--nox-ink);
}
.nox-cs-manage select:focus,
.nox-cs-manage textarea:focus { outline: none; border-color: var(--nox-bright); background: #fff; }
.nox-cs-manage .nox-check-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--nox-ink); margin: 0; }
.nox-cs-resolution textarea { min-height: 84px; resize: vertical; }
.nox-cs-manage .nox-form-actions { margin: 0; }

.nox-cs-people { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--nox-line); }
.nox-cs-people-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--nox-muted); margin: 0 0 10px; }
.nox-cs-people-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nox-cs-people-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--nox-line); border-radius: 999px; padding: 3px 6px 3px 4px; background: #fff; }
.nox-cs-people-chip form { display: inline-flex; }
.nox-cs-people-x { border: 0; background: transparent; color: var(--nox-muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 50%; }
.nox-cs-people-x:hover { color: #C43D3D; background: #FBE3E3; }
.nox-cs-people-add { display: flex; gap: 8px; align-items: center; max-width: 420px; }
.nox-cs-people-add select { flex: 1; border: 1px solid var(--nox-line); border-radius: 6px; background: var(--nox-pale); padding: 8px 10px; font: inherit; }

/* Comments card breathing room */
#comments .nox-comment-form { margin-top: 16px; }
#comments .nox-comment-form .nox-form-actions { margin-top: 10px; }
#comments .nox-comments { list-style: none; margin: 12px 0 0; padding-left: 0; }
#comments .nox-comment { padding: 12px 0; }
#comments .nox-comment-replies { list-style: none; margin: 6px 0 0 34px; padding-left: 14px; border-left: 2px solid var(--nox-line); }
#comments .nox-react-legend { margin-top: 14px; }
#comments .nox-cs-comment-edit textarea { width: 100%; border: 1px solid var(--nox-line); border-radius: 6px; background: var(--nox-pale); padding: 9px 12px; font: inherit; margin-top: 8px; }

/* v0.152.0 — Contrast guarantee: menu icons always turn white on dark/solid
   backgrounds. Appended last so it wins the cascade over every earlier layer. */

/* Nav rail: the active item's chip is solid module colour → icon white. */
.nox-nav li.nox-nav-item.is-active .nox-nav-ico,
.nox-nav li.nox-nav-item.is-active .nox-nav-ico svg,
.nox-nav li.nox-nav-item.is-active .nox-nav-ico .nox-ico {
	color: #ffffff;
}

/* Hover on the active item must never re-tint the icon dark. */
.nox-nav li.nox-nav-item.is-active.is-ready:hover .nox-nav-ico {
	background: var(--mod);
	color: #ffffff;
}

/* Mobile strip: same inversion for the active chip. */
@media (max-width: 760px) {
	.nox-nav li.nox-nav-item.is-active .nox-nav-ico {
		background: var(--mod);
		color: #ffffff;
		box-shadow: 0 3px 8px color-mix(in srgb, var(--mod) 40%, transparent);
	}
}

/* App-wide menu chips/pills with solid dark backgrounds: any SVG inside
   inherits white so line icons never vanish on their own accent. */
.nox-filter-tabs a.is-active svg,
.nox-cs-view-chip.is-active svg,
.nox-scn-chip.is-active svg,
.nox-spanel-chips button.is-active svg,
.nox-wwbtn.is-active svg,
.nox-lang-btn.is-active svg,
.nox-btn svg,
.nox-ptn-logbtn svg {
	color: #ffffff;
	stroke: currentColor;
}

/* Header sits on navy: every icon there is white by default. */
.nox-header svg { color: var(--nox-white); }
.nox-header .nox-bell:hover svg { color: var(--nox-bright); }

/* v0.153.0 — Special projects: open-a-board checkbox + board links */
.nox-ptn-openboard { margin: 4px 0 10px; font-size: 13px; }
.nox-ptn-boardlink { white-space: nowrap; }

/* v0.158.0 — Header running-task timer pill */
.nox-hdr-timer {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(41, 171, 226, 0.16);
	border: 1px solid rgba(41, 171, 226, 0.45);
	color: var(--nox-white);
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	transition: background .15s ease, border-color .15s ease;
}
.nox-hdr-timer:hover { background: rgba(41, 171, 226, 0.28); border-color: var(--nox-bright); }
.nox-hdr-timer [data-nox-timer] { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* A timer left running for longer than a working day. Frozen, and coloured
   so it reads as something to answer rather than something in progress. */
.nox-hdr-timer.is-stale { background: rgba(176, 58, 46, 0.28); border-color: #E59B94; }

/* The same state on the task page: the counter is replaced by the question. */
.nox-timer-stale {
	border: 1px solid #E8C7C2; background: #FBEAEA; border-radius: 10px;
	padding: 10px 12px; margin-top: 10px;
}
.nox-timer-stale-note { margin: 0 0 8px; font-size: 12.5px; color: #8E2B22; }
.nox-timer-stale-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nox-timer-stale-form label { margin: 0; font-size: 12.5px; font-weight: 600; }
.nox-timer-stale-form input[type="number"] { width: 90px; margin: 0; }
.nox-hdr-timer-task {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	opacity: .85;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	padding-left: 7px;
}
.nox-hdr-timer.is-paused { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.35); }
.nox-hdr-timer.is-paused [data-nox-timer] { opacity: .8; }
@media (max-width: 760px) {
	.nox-hdr-timer-task { display: none; }
}

/* =====================================================================
   UI v2 — Wave 1 (v0.160.0)
   Global normalization layer: fields, buttons, cards, tables, page
   heads, tabs, notices, KPI tiles. Appended last so it wins at equal
   specificity via cascade order. Flat surfaces (no gradients on
   controls), sentence-case labels, comfortable 40px control height.
   ===================================================================== */

:root {
	/* Spacing scale — single source for gaps/margins from here on */
	--nox-s1: 4px;  --nox-s2: 8px;  --nox-s3: 12px; --nox-s4: 16px;
	--nox-s5: 20px; --nox-s6: 24px; --nox-s7: 32px; --nox-s8: 40px;

	/* Controls */
	--nox-ctl-h:  40px;
	--nox-ctl-hs: 36px;
	--nox-ctl-r:  10px;
	--nox-card-r: 14px;
	--nox-ring:   0 0 0 3px rgba(21, 84, 160, 0.15);
	--nox-fld-bd: #D5DFEA;
}

/* ---- Page rhythm ---------------------------------------------------- */

.nox-page-head {
	align-items: flex-start;
	margin-bottom: var(--nox-s6);
}
.nox-main h1 {
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--nox-navy-ink);
}
.nox-breadcrumb { font-size: 13px; margin-bottom: var(--nox-s3); }

/* ---- Cards ---------------------------------------------------------- */

.nox-card {
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-card-r);
	box-shadow: var(--nox-e1);
	padding: var(--nox-s6);
	margin-bottom: var(--nox-s5);
}
.nox-card-title {
	font-family: var(--nox-font-head);
	font-size: 16px;
	font-weight: 700;
	color: var(--nox-navy-ink);
	margin: 0 0 var(--nox-s4);
}

/* ---- Fields: one rule to bind them all ------------------------------ */

.nox-main input[type="text"],
.nox-main input[type="email"],
.nox-main input[type="password"],
.nox-main input[type="number"],
.nox-main input[type="date"],
.nox-main input[type="time"],
.nox-main input[type="url"],
.nox-main input[type="search"],
.nox-main select,
.nox-form-card input[type="text"],
.nox-form-card input[type="email"],
.nox-form-card input[type="password"],
.nox-form-card input[type="number"],
.nox-form-card input[type="date"],
.nox-form-card input[type="time"],
.nox-form-card input[type="url"],
.nox-form-card select {
	height: var(--nox-ctl-h);
	padding: 0 12px;
	font: inherit;
	font-size: 14.5px;
	color: var(--nox-ink);
	background: var(--nox-white);
	border: 1px solid var(--nox-fld-bd);
	border-radius: var(--nox-ctl-r);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	max-width: 100%;
}
.nox-main textarea,
.nox-form-card textarea {
	height: auto;
	min-height: 104px;
	padding: 10px 12px;
	font: inherit;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--nox-ink);
	background: var(--nox-white);
	border: 1px solid var(--nox-fld-bd);
	border-radius: var(--nox-ctl-r);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	resize: vertical;
	max-width: 100%;
}
.nox-main input:hover,
.nox-main select:hover,
.nox-main textarea:hover { border-color: #B9CAD9; }
.nox-main input:focus,
.nox-main select:focus,
.nox-main textarea:focus,
.nox-form-card input:focus,
.nox-form-card select:focus,
.nox-form-card textarea:focus {
	outline: none;
	background: var(--nox-white);
	border-color: var(--nox-blue);
	box-shadow: var(--nox-ring);
}
.nox-main ::placeholder { color: #93A6B8; opacity: 1; }
.nox-main input:disabled,
.nox-main select:disabled,
.nox-main textarea:disabled {
	background: #F2F5F9;
	color: #8C9CAC;
	cursor: not-allowed;
}

/* Native select arrow (appearance reset needs a drawn chevron) */
.nox-main select,
.nox-form-card select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235B7286' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 34px;
}

/* Checkboxes / radios: brand accent, generous hit area */
.nox-main input[type="checkbox"],
.nox-main input[type="radio"] {
	width: 19px;
	height: 19px;
	accent-color: var(--nox-blue);
	cursor: pointer;
}

/* File inputs stay auto-height */
.nox-main input[type="file"] {
	height: auto;
	padding: 8px 10px;
	background: var(--nox-white);
	border: 1px solid var(--nox-fld-bd);
	border-radius: var(--nox-ctl-r);
	font: inherit;
	font-size: 14px;
}

/* Labels: sentence case, readable, close to their field */
.nox-form-card label,
.nox-fld > label {
	display: block;
	font-family: var(--nox-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nox-navy-ink);
	margin: var(--nox-s4) 0 6px;
}
.nox-form-card label:first-child,
.nox-fld:first-child > label { margin-top: 0; }

.nox-form-actions {
	display: flex;
	gap: var(--nox-s3);
	align-items: center;
	margin-top: var(--nox-s6);
	padding-top: var(--nox-s5);
	border-top: 1px solid var(--nox-line);
}

/* ---- Buttons: flat system ------------------------------------------- */

.nox-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: var(--nox-ctl-h);
	padding: 0 var(--nox-s4);
	background: var(--nox-blue);
	color: var(--nox-white);
	border: 1px solid transparent;
	border-radius: var(--nox-ctl-r);
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--nox-e1);
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.nox-btn:hover { background: #12488A; color: var(--nox-white); filter: none; box-shadow: var(--nox-e1); }
.nox-btn:active { transform: translateY(1px); }

.nox-btn-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	background: var(--nox-blue);
	color: var(--nox-white);
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.15s ease;
}
.nox-btn-small:hover { background: #12488A; color: var(--nox-white); filter: none; }

.nox-btn-quiet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: var(--nox-ctl-hs);
	padding: 0 var(--nox-s3);
	background: var(--nox-white);
	color: var(--nox-navy-ink);
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-ctl-r);
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--nox-e1);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.nox-btn-quiet:hover { background: #FBFDFF; border-color: #C3D2E0; color: var(--nox-navy-ink); }

.nox-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: var(--nox-ctl-hs);
	padding: 0 var(--nox-s3);
	background: transparent;
	color: var(--nox-blue-ink);
	border: 1px solid transparent;
	border-radius: var(--nox-ctl-r);
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.nox-btn-ghost:hover { background: var(--nox-pale); color: var(--nox-blue-ink); }

.nox-btn-danger,
.nox-btn-stop,
.nox-btn.nox-att-out {
	background: #C7362F;
	color: var(--nox-white);
	box-shadow: var(--nox-e1);
}
.nox-btn-danger:hover,
.nox-btn-stop:hover,
.nox-btn.nox-att-out:hover { background: #A82C25; color: var(--nox-white); filter: none; }

/* ---- Tables --------------------------------------------------------- */

.nox-table { font-size: 14.5px; border-collapse: collapse; }
.nox-table thead th,
.nox-table th {
	background: #F7FAFD;
	font-family: var(--nox-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nox-muted);
	border-bottom: 1px solid var(--nox-line);
	white-space: nowrap;
	padding: 11px 14px;
}
.nox-table tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid #EEF3F8;
	vertical-align: middle;
}
.nox-table tbody tr:last-child td { border-bottom: 0; }
.nox-table tbody tr:hover { background: #F9FBFE; }

/* ---- Tabs & segmented switches -------------------------------------- */

.nox-tabs { gap: var(--nox-s5); border-bottom-width: 1px; }
.nox-tab {
	padding: 0 0 12px;
	font-size: 14.5px;
	border-bottom-width: 2.5px;
	margin-bottom: -1px;
}
.nox-tab.is-active { color: var(--nox-blue-ink); border-bottom-color: var(--nox-blue); }

.nox-view-switch, .nox-range-switch {
	background: var(--nox-surface-2);
	border-radius: var(--nox-ctl-r);
	padding: 3px;
	gap: 2px;
}
.nox-view-btn, .nox-range-btn {
	border-radius: 8px;
	font-weight: 600;
	font-size: 13.5px;
}
.nox-view-btn.is-active, .nox-range-btn.is-active {
	background: var(--nox-white);
	color: var(--nox-navy-ink);
	box-shadow: var(--nox-e1);
}

.nox-filter-tabs a {
	border-radius: var(--nox-r-pill);
	font-weight: 600;
	font-size: 13px;
}

/* ---- Notices -------------------------------------------------------- */

.nox-notice {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 13px var(--nox-s4);
	border-radius: 12px;
	font-size: 14px;
	margin: 0 0 var(--nox-s5);
	border: 1px solid transparent;
}
.nox-notice-ok    { background: #EDF8F1; border: 1px solid #C6E7D4; border-left: 1px solid #C6E7D4; color: #14683C; }
.nox-notice-error { background: #FBE9E7; border: 1px solid #F0C7C2; border-left: 1px solid #F0C7C2; color: #9B2C26; }
.nox-notice-archived { background: #FEF7EA; border: 1px solid #F2DCB0; border-left: 1px solid #F2DCB0; color: #8A5A00; }

/* ---- Empty states --------------------------------------------------- */

.nox-empty {
	text-align: center;
	padding: var(--nox-s7) var(--nox-s5);
	color: var(--nox-muted);
	font-size: 14px;
}

/* ---- KPI / stat tiles: flat accents --------------------------------- */

.nox-kpi::before  { background: var(--nox-blue); }
.nox-kpi.is-alert::before { background: #C7362F; }
.nox-stat::before { background: var(--nox-blue); }
.nox-kpi, .nox-stat { border-radius: var(--nox-card-r); }
.nox-kpi:hover { transform: none; border-color: #C3D2E0; box-shadow: var(--nox-e2); }

/* ---- Focus visibility (accessibility, uniform) ---------------------- */

.nox-main a:focus-visible,
.nox-main button:focus-visible {
	outline: none;
	box-shadow: var(--nox-ring);
	border-radius: 6px;
}

/* =====================================================================
   UI v2 — Wave 2 (v0.161.0)
   Login, Calendar (custom markup), boards (Tasks/QC), empty states.
   Same cascade-order strategy as Wave 1.
   ===================================================================== */

/* ---- Login: bring the entry door into the v2 system ----------------- */

.nox-login-card {
	border-left: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(4, 12, 24, 0.45);
	padding: 32px;
}
.nox-login-card h1 { font-size: 21px; letter-spacing: -0.01em; }
.nox-login-card label {
	font-size: 13px;
	letter-spacing: normal;
	text-transform: none;
	margin: 16px 0 6px;
}
.nox-login-card input[type="text"],
.nox-login-card input[type="password"] {
	width: 100%;
	height: 44px;
	padding: 0 13px;
	font: inherit;
	font-size: 15px;
	color: var(--nox-ink);
	background: var(--nox-white);
	border: 1px solid var(--nox-fld-bd);
	border-radius: var(--nox-ctl-r);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nox-login-card input[type="text"]:focus,
.nox-login-card input[type="password"]:focus {
	outline: none;
	background: var(--nox-white);
	border-color: var(--nox-blue);
	box-shadow: var(--nox-ring);
}
.nox-login-card button {
	height: 46px;
	padding: 0;
	border-radius: var(--nox-ctl-r);
	background: var(--nox-blue);
	font-weight: 600;
	font-size: 15px;
	box-shadow: var(--nox-e1);
	transition: background 0.15s ease;
}
.nox-login-card button:hover { background: #12488A; }
.nox-login-error {
	background: #FBE9E7;
	border: 1px solid #F0C7C2;
	border-left: 1px solid #F0C7C2;
	color: #9B2C26;
	border-radius: 10px;
	padding: 11px 13px;
}

/* ---- Calendar: month grid polish ------------------------------------ */

.nox-cal-grid { gap: 8px; }
.nox-cal-cell {
	border-radius: 10px;
	padding: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nox-cal-cell:not(.is-empty):hover { border-color: #C3D2E0; box-shadow: var(--nox-e1); }
.nox-cal-cell.is-empty { background: transparent; border: 0; box-shadow: none; }
.nox-cal-cell.is-today {
	background: #F3F9FE;
	border-color: var(--nox-blue);
	box-shadow: inset 0 0 0 1px var(--nox-blue);
}
.nox-cal-daynum { font-size: 12.5px; }
.nox-cal-cell.is-today .nox-cal-daynum {
	color: var(--nox-white);
	background: var(--nox-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border-radius: 999px;
	align-self: flex-start;
}
.nox-cal-task { border-radius: 6px; padding: 4px 7px; }
.nox-cal-chip { border-radius: 6px; padding: 3px 7px; font-size: 11px; }

.nox-cal-step {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: 10px;
	color: var(--nox-navy-ink);
	box-shadow: var(--nox-e1);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.nox-cal-step:hover { background: #FBFDFF; border-color: #C3D2E0; color: var(--nox-blue-ink); }
.nox-cal-dow { font-size: 11px; padding-bottom: 6px; }

/* ---- Boards (Tasks status board, My Board, QC queues) --------------- */

.nox-board-col {
	background: var(--nox-surface-2);
	border-radius: 12px;
	padding: 10px;
}
.nox-board-col-head {
	border-radius: 8px;
	padding: 7px 11px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
}
.nox-board-card {
	border-radius: 10px;
	padding: 11px 13px;
	box-shadow: var(--nox-e1);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.nox-board-card:hover { box-shadow: var(--nox-e2); border-color: #C3D2E0; }

/* ---- Empty states: icon + breathing room when they own the card ----- */

.nox-card > .nox-empty:only-child {
	padding: var(--nox-s8) var(--nox-s5);
}
.nox-card > .nox-empty:only-child::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin: 0 auto var(--nox-s4);
	border-radius: 15px;
	background-color: var(--nox-pale);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231554A0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 13.5 7 6h10l4 7.5'/><path d='M3 13.5V19a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-5.5'/><path d='M3 13.5h5a2 2 0 0 0 4 0h1a2 2 0 0 0 4 0h4'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
}

/* =====================================================================
   UI v2 — Wave 3 (v0.162.0)
   Fine sweep: task detail, Feed, Partners, attendance metrics,
   pills/badges/icon-buttons harmonized to the v2 system.
   ===================================================================== */

/* ---- Feed: keep the social pill for comments, on v2 mechanics ------- */

.nox-comment-add input[type="text"],
.nox-main .nox-comment-add input[type="text"] {
	height: var(--nox-ctl-h);
	border-radius: 999px;
	padding: 0 16px;
	background: var(--nox-white);
	border: 1px solid var(--nox-fld-bd);
}
.nox-comment-add input[type="text"]:focus {
	border-color: var(--nox-blue);
	box-shadow: var(--nox-ring);
	background: var(--nox-white);
}
.nox-composer-top textarea,
.nox-main .nox-composer-top textarea {
	min-height: 76px;
	border-radius: 14px;
}

/* ---- Task detail: icon buttons + hover language ---------------------- */

.nox-icon-btn {
	width: 36px;
	height: 36px;
	box-shadow: var(--nox-e1);
}
.nox-icon-btn:hover {
	transform: none;
	background: #FBFDFF;
	border-color: #C3D2E0;
}

/* Clickable stat tiles: same hover language as cards/buttons */
.nox-stat-link:hover {
	border-color: #C3D2E0;
	background: #FBFDFF;
}

/* ---- Partners: inline add-forms become proper light panels ----------- */

.nox-ptn-inline-form {
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: 12px;
	padding: var(--nox-s4);
	box-shadow: var(--nox-e1);
}
.nox-ptn-inline-form label {
	font-family: var(--nox-font-head);
	font-size: 13px;
	font-weight: 600;
	color: var(--nox-navy-ink);
}
/* `.nox-ptn-add summary` is (0,1,1) and beats the (0,1,0) of .nox-btn, so
   this used to paint blue text onto the one summary that is a SOLID button
   — "+ Log communication" rendered as an empty blue slab. Scoped to the
   quiet variant it was written for; a summary carrying its own button class
   keeps that class's colour. */
.nox-ptn-add summary.nox-btn-quiet,
.nox-ptn-add summary:not([class*="nox-btn"]) {
	font-weight: 600;
	color: var(--nox-blue-ink);
}
.nox-ptn-add summary:hover { text-decoration: underline; }
.nox-ptn-add summary.nox-btn:hover { text-decoration: none; }

/* ---- Attendance metric tiles: from pale slabs to v2 tiles ------------ */

.nox-att-metric {
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: 12px;
	box-shadow: var(--nox-e1);
	padding: 14px;
}
.nox-att-metric-strong {
	background: var(--nox-blue);
	border-color: var(--nox-blue);
}

/* ---- Pills & badges: one size grammar -------------------------------- */

.nox-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
}
.nox-badge {
	font-size: 11px;
	padding: 4px 10px;
}

/* Status chips inside tables (open / in progress / done / blocked) */
.nox-status-open,
.nox-status-in_progress,
.nox-status-done,
.nox-status-blocked {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
/* Board column heads keep their bar shape */
.nox-board-col-head.nox-status-open,
.nox-board-col-head.nox-status-in_progress,
.nox-board-col-head.nox-status-done,
.nox-board-col-head.nox-status-blocked {
	display: flex;
	height: auto;
	border-radius: 8px;
	padding: 7px 11px;
}
/* Calendar task chips keep their block shape */
.nox-cal-task.nox-status-in_progress,
.nox-cal-task.nox-status-blocked,
.nox-cal-task.nox-status-done {
	display: block;
	height: auto;
	border-radius: 6px;
	padding: 4px 7px;
	font-weight: 400;
	white-space: nowrap;
}

/* =====================================================================
   UI v2 — Wave 4 (v0.163.0)
   Part A: dark theme, hung off body[data-nox-theme="dark"].
   Part B: mobile refinement (≤760px) for the v2 system.
   ===================================================================== */

/* ---- Header theme toggle button ------------------------------------- */

.nox-theme-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	color: #C3D5E7;
	background: rgba(255, 255, 255, 0.08);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.nox-theme-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---- Part A · Dark theme: token flips (component skin is generated below) ---- */

body[data-nox-theme="dark"] {
	/* Gray-slate palette — neutral surfaces, navy stays as brand chrome */
	--nox-surface:   #14161B;
	--nox-surface-2: #1B1E25;
	--nox-card:      #1E222B;
	--nox-ink:       #E8EAEE;
	--nox-muted:     #9BA3B0;
	--nox-line:      #2B303A;
	--nox-pale:      #262B36;
	--nox-fld-bd:    #353C48;
	--nox-ring:      0 0 0 3px rgba(41, 171, 226, 0.22);
	--nox-e1: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.28);
	--nox-e2: 0 2px 8px rgba(0,0,0,0.4), 0 10px 24px rgba(0,0,0,0.34);

	background: var(--nox-surface);
	color: var(--nox-ink);
}

/* ---- Part B · Mobile refinement (≤760px) ----------------------------- */

@media (max-width: 760px) {
	.nox-main { padding: 18px 14px 28px; }

	.nox-page-head { flex-direction: column; align-items: stretch; gap: 12px; }
	.nox-main h1 { font-size: 21px; }
	.nox-head-right { flex-wrap: wrap; }
	.nox-head-right .nox-btn { flex: 1 1 auto; }

	.nox-card { padding: 16px; border-radius: 12px; }

	/* Any form grid collapses to one column */
	.nox-form-row, .nox-2col, .nox-ptn-form-row { grid-template-columns: 1fr; }

	/* Full-width tap-friendly actions */
	.nox-form-actions { flex-direction: column; align-items: stretch; }
	.nox-form-actions .nox-btn,
	.nox-form-actions .nox-btn-quiet,
	.nox-form-actions .nox-btn-danger { width: 100%; height: 44px; }

	/* Comfortable touch targets */
	.nox-main input[type="text"], .nox-main input[type="email"],
	.nox-main input[type="password"], .nox-main input[type="number"],
	.nox-main input[type="date"], .nox-main input[type="time"],
	.nox-main input[type="url"], .nox-main input[type="search"],
	.nox-main select { height: 44px; font-size: 16px; }
	.nox-main textarea { font-size: 16px; }
	.nox-btn { height: 44px; }
	.nox-btn-quiet, .nox-btn-ghost { height: 40px; }

	/* Tables scroll sideways instead of squeezing */
	.nox-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
	.nox-table thead th, .nox-table tbody td { padding: 10px 12px; }

	/* KPI strips: two per row */
	.nox-kpi-strip, .nox-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }

	/* Toolbar filters stack full width */
	.nox-inv-filter, .nox-filter-grid { flex-direction: column; align-items: stretch; }
	.nox-inv-filter input[type="text"], .nox-inv-filter select { width: 100%; min-width: 0; }

	/* Boards scroll horizontally as columns */
	.nox-board { display: flex; overflow-x: auto; gap: 10px; -webkit-overflow-scrolling: touch; }
	.nox-board .nox-board-col { flex: 0 0 260px; }

	/* Calendar squeezes politely */
	.nox-cal-grid { gap: 4px; }
	.nox-cal-cell { min-height: 58px; padding: 5px; border-radius: 8px; }
	.nox-cal-chip, .nox-cal-task { font-size: 10px; padding: 2px 5px; }

	/* Header: keep essentials, drop the world clocks */
	.nox-clock-strip { display: none; }
	.nox-theme-btn { width: 38px; height: 38px; }
}
/* ===== GENERATED-DARK-SKIN ===== */

/* =====================================================================
   UI v2 — Dark skin (GENERATED, v0.164.0)
   Auto-derived from every light background / border / navy-text rule
   in this file. Do not hand-edit between the two GENERATED-DARK-SKIN
   markers — tools/gen-dark.py --write replaces everything between
   them, and preserves everything outside them. Manual exceptions and
   the later feature layers follow the END marker and win on source
   order. Regenerating moves colours app-wide: read the report first.
   ===================================================================== */

body[data-nox-theme="dark"] .nox-login-card { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-login-card h1 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-login-error { background-color: #4B1616; color: #E2A097; }
body[data-nox-theme="dark"] .nox-login-card label { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-login-card input[type="text"], body[data-nox-theme="dark"] .nox-login-card input[type="password"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-login-card input[type="text"]:focus, body[data-nox-theme="dark"] .nox-login-card input[type="password"]:focus { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-app-body { background-color: #1C3045; }
body[data-nox-theme="dark"] .nox-nav { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-nav li.is-active { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-soon { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-main h1 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-card { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-card h2 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-stat { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-stat-value { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-chart-card h2, body[data-nox-theme="dark"] .nox-recent h2 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-recent-who { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-task-link { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-status-open { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-status-in_progress { background-color: #4B3916; color: #E8CA92; }
body[data-nox-theme="dark"] .nox-status-done { background-color: #1A4629; color: #95E5AF; }
body[data-nox-theme="dark"] .nox-status-blocked { background-color: #4B1B16; color: #E49D96; }
body[data-nox-theme="dark"] .nox-priority-low { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-priority-normal { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-priority-high { background-color: #4B1616; color: #E49D96; }
body[data-nox-theme="dark"] .nox-overdue { color: #E49D96; }
body[data-nox-theme="dark"] .nox-notice-ok { background-color: #1A4629; color: #93E6AE; }
body[data-nox-theme="dark"] .nox-notice-error { background-color: #4B1616; color: #E2A097; }
body[data-nox-theme="dark"] .nox-form-card label { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-running { color: #E8CA92; }
body[data-nox-theme="dark"] .nox-comment-form textarea { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-comment-form textarea:focus { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-role-core { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-role-collaborator { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-remove:hover { color: #E49D96; background-color: #4B1616; }
body[data-nox-theme="dark"] .nox-inv-storage h2 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-inv-exports-row h2 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-export-name { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-cat-name { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-cat-bar { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-inv-thumb { background-color: #1F3042; }
body[data-nox-theme="dark"] .nox-inv-item-name { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-shelf-label { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-btn-danger { background-color: #4B1616; color: #E49D96; border-color: #7E3A2F; }
body[data-nox-theme="dark"] .nox-stock-num { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-move-form { background-color: #1C3045; }
body[data-nox-theme="dark"] .nox-move-in { background-color: #1A4629; }
body[data-nox-theme="dark"] .nox-move-out { background-color: #4B1616; }
body[data-nox-theme="dark"] .nox-move-adjust { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-move-title { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-move-badge.nox-move-in, body[data-nox-theme="dark"] .nox-move-badge.nox-move-initial { background-color: #1A4629; color: #95E5AF; }
body[data-nox-theme="dark"] .nox-move-badge.nox-move-out { background-color: #4B1616; color: #E49D96; }
body[data-nox-theme="dark"] .nox-move-badge.nox-move-adjust { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-move-what { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-danger-link { color: #E49D96; }
body[data-nox-theme="dark"] .nox-profile-id h1 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-team-name { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-view-switch { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-view-btn.is-active { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-view-btn:hover:not(.is-active) { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-board-col { background-color: #1F3042; }
body[data-nox-theme="dark"] .nox-board-card { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-board-card-title { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-board-col-head.nox-status-open { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-board-col-head.nox-status-in_progress { background-color: #4B3916; color: #E8CA92; }
body[data-nox-theme="dark"] .nox-board-col-head.nox-status-done { background-color: #1A4629; color: #95E5AF; }
body[data-nox-theme="dark"] .nox-board-col-head.nox-status-blocked { background-color: #4B1B16; color: #E49D96; }
body[data-nox-theme="dark"] .nox-tab:hover:not(.is-active) { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-notice-archived { background-color: #4B3916; color: #E8CA92; }
body[data-nox-theme="dark"] .nox-board-card.is-finished { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-mycol-del:hover { color: #E49D96; }
body[data-nox-theme="dark"] .nox-myboard .nox-board-col-head { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cal-title { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-cal-cell { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-cal-task { color: var(--nox-ink); background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cal-task.nox-status-in_progress { background-color: #4B3916; }
body[data-nox-theme="dark"] .nox-cal-task.nox-status-blocked { background-color: #4B1B16; }
body[data-nox-theme="dark"] .nox-cal-task.nox-status-done { background-color: #1A4629; }
body[data-nox-theme="dark"] .nox-section-h { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-qc-product-name { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-qc-status-open { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-qc-status-inspecting { background-color: #4B3916; color: #E8CA92; }
body[data-nox-theme="dark"] .nox-qc-status-closed { background-color: #1A4629; color: #95E5AF; }
body[data-nox-theme="dark"] .nox-sev-critical { background-color: #4B1B16; color: #E49D96; }
body[data-nox-theme="dark"] .nox-sev-major { background-color: #4B3916; color: #E8CA92; }
body[data-nox-theme="dark"] .nox-sev-minor { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-qc-insp-nums { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-qc-defect-label { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-qc-defect-row { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-qc-remove-defect { color: #E49D96; }
body[data-nox-theme="dark"] .nox-range-switch { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-range-btn.is-active { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-range-btn:hover:not(.is-active) { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-kpi { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-kpi-value { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-kpi.is-alert .nox-kpi-value { color: #E49D96; }
body[data-nox-theme="dark"] .nox-lang-switch { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-kb-card { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-kb-card-icon { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-kb-card-audience { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-kb-toc { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-kb-section h2 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-kb-pager a { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-kb-section { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-kb-section > summary.nox-kb-section-head { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-kb-section > summary.nox-kb-section-head:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-kb-group { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-kb-group > summary.nox-kb-group-head:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-kb-group-title { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-kb-section-body thead th { background-color: #16324B; color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-btn-ghost:hover { background-color: #16324B; color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-form-status.is-submitted { background-color: #4B3D16; color: #E8CE92; }
body[data-nox-theme="dark"] .nox-form-status.is-approved { background-color: #164B2B; color: #92E8B7; }
body[data-nox-theme="dark"] .nox-form-status.is-denied { background-color: #4B1616; color: #E89292; }
body[data-nox-theme="dark"] .nox-form-status.is-countersigned, body[data-nox-theme="dark"] .nox-form-status.is-signed { background-color: #164B2B; color: #92E8B7; }
body[data-nox-theme="dark"] .nox-form-status.is-reopened { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-forms-ref { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-form-h { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-filter-tabs a:hover { background-color: #16324B; color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-checkline-strong { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-att-status strong { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-att-hours { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-badge-ok { background-color: #1A4629; color: #95E5AF; }
body[data-nox-theme="dark"] .nox-badge-warn { background-color: #4B3916; color: #E8CA92; }
body[data-nox-theme="dark"] .nox-att-cal-worked { color: #95E5AF; background-color: #1A4629; }
body[data-nox-theme="dark"] .nox-att-cal-off { color: #E8CA92; background-color: #4B3916; }
body[data-nox-theme="dark"] .nox-att-key-worked { background-color: #1A4629; }
body[data-nox-theme="dark"] .nox-att-key-off { background-color: #4B3916; }
body[data-nox-theme="dark"] .nox-att-metric { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-att-metric-val { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-stat-link:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-alert-card { background-color: #4B3616; }
body[data-nox-theme="dark"] .nox-alert-card h2 { color: #E8CA92; }
body[data-nox-theme="dark"] .nox-app-body { background-color: #1A2D47; }
body[data-nox-theme="dark"] .nox-nav-ico { background-color: #16324B; background-color: #232833; }
body[data-nox-theme="dark"] .nox-nav li.nox-nav-item.is-ready:hover .nox-nav-label { background-color: #1B2F46; color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-nav li.nox-nav-item.is-ready:hover .nox-nav-ico { background-color: #2A303C; }
body[data-nox-theme="dark"] .nox-nav li.nox-nav-item.is-active .nox-nav-label { background-color: #16324B; background-color: #232833; color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-nav li.nox-nav-item.is-soon .nox-nav-ico { background-color: #1B2F46; }
body[data-nox-theme="dark"] .nox-kpi-go { background-color: #1B2F46; }
body[data-nox-theme="dark"] .nox-view-switch, body[data-nox-theme="dark"] .nox-range-switch { background-color: #1B2F46; }
body[data-nox-theme="dark"] .nox-table th { background-color: #1A2D47; }
body[data-nox-theme="dark"] .nox-prog-pill { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-chip { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-ava { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-comment-body { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-nav-account { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-nav-account:hover { background-color: #2A303C; }
body[data-nox-theme="dark"] .nox-form-card input[type="time"], body[data-nox-theme="dark"] .nox-form-card input[type="url"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-form-card input[type="time"]:focus, body[data-nox-theme="dark"] .nox-form-card input[type="url"]:focus { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-composer-top textarea { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-composer-top textarea:focus { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-composer-chip { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-composer-video input { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-composer-video input:focus { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-post-hiddenflag { color: #E89292; background-color: #4B1616; }
body[data-nox-theme="dark"] .nox-post-menu > summary:hover, body[data-nox-theme="dark"] .nox-comment-menu > summary:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-post-menu-pop { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-menu-act:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-menu-danger { color: #E89296; }
body[data-nox-theme="dark"] .nox-menu-danger:hover { background-color: #4B1616; }
body[data-nox-theme="dark"] .nox-post-img { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-react-btn { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-react-btn:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-comment-bubble { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-comment-hiddentag { color: #E89292; }
body[data-nox-theme="dark"] .nox-comment-add input[type="text"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-comment-add input[type="text"]:focus { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-rail-title { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-cal-event { background-color: #232833; color: var(--nox-ink); }
body[data-nox-theme="dark"] a.nox-cal-event:hover { background-color: #2A303C; }
body[data-nox-theme="dark"] .nox-cal-event.is-cancelled { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cal-cell.is-past { background-color: #222E3F; border-color: #3E576F; }
body[data-nox-theme="dark"] .nox-cal-cell.is-past .nox-cal-event { background-color: #222E3F; }
body[data-nox-theme="dark"] .nox-badge-recur { background-color: #232833; }
body[data-nox-theme="dark"] .nox-event-row.is-past .nox-event-date { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-edit-bar { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-wcard { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-wwbtn { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-wtoggle { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-wtoggle:hover { color: #E89296; }
body[data-nox-theme="dark"] .nox-w-mval { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-w-li-tag.nox-tone-warn { color: #E8D092; }
body[data-nox-theme="dark"] .nox-w-li-tag.nox-tone-alert { color: #E89296; }
body[data-nox-theme="dark"] .nox-wtray .nox-wcard { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-w-ring-val { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-w-ring-side .l1 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-note-soft { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-note-soft p { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-fld input, body[data-nox-theme="dark"] .nox-fld select { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-wgear:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-wctrl.is-open .nox-wmenu { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-wmenu-fld select { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-wmenu-reset { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-scn-chip { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-scn-del:hover { color: #E49D96; }
body[data-nox-theme="dark"] .nox-scn-panel { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-scn-fld input[type="text"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-review-cat { background-color: #1B2F46; }
body[data-nox-theme="dark"] .nox-cmdk-panel { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-cmdk-close { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cmdk-item:hover, body[data-nox-theme="dark"] .nox-cmdk-item.is-active { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cmdk-ic { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cmdk-foot { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-cmdk-foot kbd { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-cmdk-ic-tasks { color: #92D5E8; }
body[data-nox-theme="dark"] .nox-cmdk-ic-projects { color: #97BFE2; }
body[data-nox-theme="dark"] .nox-cmdk-ic-inventory, body[data-nox-theme="dark"] .nox-cmdk-ic-skus { color: #92E8DF; }
body[data-nox-theme="dark"] .nox-cmdk-ic-quality { color: #E8C592; }
body[data-nox-theme="dark"] .nox-cmdk-ic-kb { color: #92C7E8; }
body[data-nox-theme="dark"] .nox-cmdk-ic-actions { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-form-subhead { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-defect-hint { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-stock-low { background-color: #4B1616; color: #E89892; }
body[data-nox-theme="dark"] .nox-stock-over { background-color: #4B3D16; color: #E8CA92; }
body[data-nox-theme="dark"] .nox-2fa-qr { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-2fa-key code { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-login-info { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-drive-card { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-drive-card:hover { border-color: #2B5782; }
body[data-nox-theme="dark"] .nox-drive-ico { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-drive-card.is-folder .nox-drive-ico { background-color: #4B3D16; color: #E8CE92; }
body[data-nox-theme="dark"] .nox-drive-badge { background-color: #1B2F46; }
body[data-nox-theme="dark"] .nox-drive-preview { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-drive-preview-frame { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-file-thumb { background-color: #1B2F46; }
body[data-nox-theme="dark"] .nox-drive-embed { background-color: #1B2F46; }
body[data-nox-theme="dark"] .nox-drive-embed-icon { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-drive-embed-frame { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-cal-day { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-overdue-banner { background-color: #4B1916; border-color: #82362B; color: #E79A93; }
body[data-nox-theme="dark"] .nox-blocked-card { background-color: #4B1C16; }
body[data-nox-theme="dark"] .nox-blocked-card h2 { color: #E49D95; }
body[data-nox-theme="dark"] .nox-pto-balance { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-pto-table tr.is-open > td { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-pto-detail-row > td { background-color: #1B2F46; }
body[data-nox-theme="dark"] .nox-pto-adj-days.is-debit { color: #E49D96; }
body[data-nox-theme="dark"] .nox-pto-adj-days.is-credit { color: #92E8B7; }
body[data-nox-theme="dark"] .nox-mention { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-mention:hover { background-color: #162F4B; }
body[data-nox-theme="dark"] .nox-mention-menu { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-mention-item:hover, body[data-nox-theme="dark"] .nox-mention-item.is-active { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-creact-btn:hover { background-color: #1B2F46; }
body[data-nox-theme="dark"] .nox-creact-btn.is-on { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-creact-btn[data-reaction="dislike"].is-on { background-color: #4B1916; }
body[data-nox-theme="dark"] .nox-cal-step { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-cal-step:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cal-jump select { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-btn-small.nox-btn-quiet { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-btn-small.nox-btn-quiet:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-btn-small.nox-menu-danger { background-color: var(--nox-card); border-color: #822B2B; }
body[data-nox-theme="dark"] .nox-cal-today { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-pnum { background-color: #183049; color: #97BFE2; border-color: #2E5880; }
body[data-nox-theme="dark"] .nox-pprio-low { background-color: #22303F; color: #A1BFD9; }
body[data-nox-theme="dark"] .nox-pprio-medium { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-pprio-high { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-pprio-critical { background-color: #4B1616; color: #E49D96; }
body[data-nox-theme="dark"] .nox-phealth-on_track { background-color: #16351F; color: #8FCFA8; }
body[data-nox-theme="dark"] .nox-phealth-at_risk { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-phealth-off_track { background-color: #4B1616; color: #E49D96; }
body[data-nox-theme="dark"] .nox-pprog-bar { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-section-row > td { background-color: #16324B; color: #A1C6E8; }
body[data-nox-theme="dark"] .nox-psection { border-bottom-color: #22303F; }
body[data-nox-theme="dark"] .nox-ptag { background-color: #22303F; color: #A1BFD9; }
body[data-nox-theme="dark"] .nox-who-pop { background-color: var(--nox-card); border-color: #22303F; }
body[data-nox-theme="dark"] .nox-fcreact-palette { background-color: var(--nox-card); border-color: #22303F; }
body[data-nox-theme="dark"] .nox-who-btn:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-fcreact-open:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-fcreact-pick:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-fx-val { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-fx-conv { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-fx-conv .nox-fx-amount { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-fx-conv select { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-wclock-card { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-wclock-card .nox-clock-time { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-qc-line-count { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-qc-line-chip { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-qc-variant-blue { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-qc-variant-supernova { background-color: #2A164B; }
body[data-nox-theme="dark"] .nox-qc-variant-white { background-color: #22303F; color: #A1BFD9; }
body[data-nox-theme="dark"] .nox-qc-variant-other { background-color: #22303F; color: #A1BFD9; }
body[data-nox-theme="dark"] .nox-eq-badge-ok { background-color: #164B32; color: #92E8BD; }
body[data-nox-theme="dark"] .nox-eq-badge-warn { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-eq-badge-alert { background-color: #4B1916; }
body[data-nox-theme="dark"] .nox-eq-freq { background-color: #1E3043; color: #A1BDD9; }
body[data-nox-theme="dark"] .nox-eq-ticket-res { background-color: #174A2E; color: #92E8BD; }
body[data-nox-theme="dark"] .nox-eq-tstatus-open { background-color: #4B1916; }
body[data-nox-theme="dark"] .nox-eq-tstatus-in_progress { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-eq-tstatus-closed { background-color: #164B32; color: #92E8BD; }
body[data-nox-theme="dark"] .nox-qc-stage { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-qc-stage.is-past { background-color: #164B32; color: #92E8BD; }
body[data-nox-theme="dark"] .nox-qc-proc-print { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-qc-proc-gluing { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-qc-rework-chip { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-btn-warn { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-btn-warn:hover { background-color: #4B3516; }
body[data-nox-theme="dark"] .nox-stock-chip.nox-stock-st-warn { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-stock-chip.nox-stock-st-alert { background-color: #4B1916; }
body[data-nox-theme="dark"] .nox-plan-table tbody tr.nox-plan-row-alert { background-color: #4B1C16; }
body[data-nox-theme="dark"] .nox-plan-table tbody tr.nox-plan-row-warn { background-color: #4B3816; }
body[data-nox-theme="dark"] .nox-cs-view-chip { background-color: #1E3043; }
body[data-nox-theme="dark"] .nox-cs-row-escalated { background-color: #4B1630; }
body[data-nox-theme="dark"] .nox-cs-location { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-cs-method { background-color: #22303F; color: #A1BDD9; }
body[data-nox-theme="dark"] .nox-cs-method-whatsapp { background-color: #164B32; color: #92E8BD; }
body[data-nox-theme="dark"] .nox-cs-method-email { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cs-method-phone { background-color: #1E3043; color: #A1BDD9; }
body[data-nox-theme="dark"] .nox-cs-method-instagram { background-color: #4B1632; }
body[data-nox-theme="dark"] .nox-cs-method-store { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-cs-status-open { background-color: #4B1916; }
body[data-nox-theme="dark"] .nox-cs-status-waiting { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-cs-file { border-color: #22303F; }
body[data-nox-theme="dark"] .nox-cs-ref { background-color: #16324B; color: #A1C6E8; }
body[data-nox-theme="dark"] .nox-cs-sla-overdue { background-color: #4B1916; color: #E49D96; }
body[data-nox-theme="dark"] .nox-cs-sla-stale { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-cs-sla-waiting,
body[data-nox-theme="dark"] .nox-cs-sla-ok { background-color: #22303F; color: #A1BFD9; }
body[data-nox-theme="dark"] .nox-cs-attachform input[type="file"] { background-color: var(--nox-card); border-color: #2E5880; }
body[data-nox-theme="dark"] .nox-cs-attachform input[type="file"]::file-selector-button { background-color: #171A21; border-color: #22303F; }
body[data-nox-theme="dark"] .nox-cs-status-in_progress { background-color: #4B3516; color: #E8C592; }
body[data-nox-theme="dark"] .nox-cs-status-closed { background-color: #164B32; color: #92E8BD; }
body[data-nox-theme="dark"] .nox-sd-btn { background-color: var(--nox-card); color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-sd-btn:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-spanel { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-spanel-head h2 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-spanel-x:hover { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-spanel-chips button { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-spanel-foot { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-scen-row:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-scen-apply { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-scen-del-btn:hover { color: #E49D96; }
body[data-nox-theme="dark"] .nox-eq-alert-over { color: #E49D96; }
body[data-nox-theme="dark"] .nox-eq-alert-soon { color: #E8CA92; }
body[data-nox-theme="dark"] .nox-scen-row.is-current { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-scn-more summary { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-order-toggle:hover { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-order-lines td { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-att-q-break { color: #E8D092; }
body[data-nox-theme="dark"] .nox-mod-reports .nox-nav-ic { color: #A1BFD9; }
body[data-nox-theme="dark"] .nox-report-card { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-cal-chip-event { background-color: #29164B; }
body[data-nox-theme="dark"] .nox-cal-chip-task { background-color: #163C4B; color: #92D0E8; }
body[data-nox-theme="dark"] .nox-cal-chip-task.is-overdue { background-color: #4B2516; color: #E8AC92; }
body[data-nox-theme="dark"] .nox-cal-chip-task.is-done { background-color: #1C442B; color: #95E5B9; }
body[data-nox-theme="dark"] .nox-cal-chip-pto { background-color: #1C442B; color: #95E5B9; }
body[data-nox-theme="dark"] .nox-cal-chip-worked { background-color: #1E3043; color: #A1BFD9; }
body[data-nox-theme="dark"] .nox-cal-ev { background-color: #232833; }
body[data-nox-theme="dark"] .nox-ev-pop { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-ev-pop-proj { color: #97BFE2; }
body[data-nox-theme="dark"] .nox-btn-danger-quiet { color: #E8AC92; background-color: #4B2516; }
body[data-nox-theme="dark"] .nox-mod-ip .nox-ico { color: #D9C4A1; }
body[data-nox-theme="dark"] .nox-mini-card { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-mini-card:hover { border-color: #395775; }
body[data-nox-theme="dark"] .nox-sub-card { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-pill { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-pill.nox-tone-ok { background-color: #1A4629; color: #93E6AE; }
body[data-nox-theme="dark"] .nox-pill.nox-tone-warn { background-color: #4B3A16; color: #E8D092; }
body[data-nox-theme="dark"] .nox-pill.nox-tone-bad { background-color: #4B1616; color: #E59B94; }
body[data-nox-theme="dark"] .nox-pill.nox-tone-info { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-pill.nox-tone-muted { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-ip-dup { background-color: #4B3A16; color: #E8CF92; }
body[data-nox-theme="dark"] .nox-filter-tabs { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-filter-tabs a:hover { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-filter-tabs a.is-active { background-color: var(--nox-card); color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-tab-count { background-color: #22313F; }
body[data-nox-theme="dark"] .nox-filter-tabs a.is-active .nox-tab-count { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-filter-tabs a.has-alert .nox-tab-count { background-color: #4B1616; color: #E59B94; }
body[data-nox-theme="dark"] .nox-searchbar { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-kpi.is-alert .nox-kpi-value { color: #E89296; }
body[data-nox-theme="dark"] .nox-kpi.is-warn .nox-kpi-value { color: #E8D092; }
body[data-nox-theme="dark"] .nox-kpi.is-good .nox-kpi-value { color: #95E5AF; }
body[data-nox-theme="dark"] .nox-btn-quiet:hover { background-color: #22303F; color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-filter-tabs.nox-tabs-sub a:hover { background-color: #22303F; color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-filter-tabs.nox-tabs-sub a.is-active { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cal-toolbar { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-cal-step { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-cal-today { background-color: #22303F; color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-cal-today:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cal-today.is-current { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cal-jump select, body[data-nox-theme="dark"] .nox-cal-jump input[type="date"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-cal-monthname { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-cal-addday { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cal-wkcol { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-cal-wkcol.is-past { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-cal-wkday { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-cal-wkitem { background-color: #183049; }
body[data-nox-theme="dark"] .nox-cal-wkadd { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-agenda-num { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-agenda-item { background-color: #183049; }
body[data-nox-theme="dark"] .nox-guest-picker { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-guest-opt:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cal-fold > summary { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-cal-fold > summary:hover { background-color: #183049; }
body[data-nox-theme="dark"] .nox-fold-state { background-color: #22303F; }
body[data-nox-theme="dark"] .nox-btn-small.nox-btn-ghost { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-btn-small.nox-btn-ghost:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-cal-chip-pto .nox-ev-ico { color: #95E5AF; }
body[data-nox-theme="dark"] .nox-agenda-ico { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-cal-legend .nox-legend-leave .nox-ev-ico { color: #95E5AF; }
body[data-nox-theme="dark"] .nox-mention-all { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-poll-toggle.is-on { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-poll-box { background-color: #16304B; }
body[data-nox-theme="dark"] .nox-poll-box input[type="text"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-poll { background-color: #183049; }
body[data-nox-theme="dark"] .nox-poll-opt { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-poll-fill { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-poll-opt.is-mine .nox-poll-fill { background-color: #16304B; }
body[data-nox-theme="dark"] .nox-celeb-row:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-celeb-row.is-today .nox-celeb-date { color: #E8AE92; }
body[data-nox-theme="dark"] .nox-celeb-burst { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-post-celeb.is-anniversary .nox-celeb-burst { color: #92E8DF; }
body[data-nox-theme="dark"] .nox-celeb-title { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-comment-bubble { background-color: #1C2E44; }
body[data-nox-theme="dark"] .nox-react-btn.is-mine { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-ev-pop-tz { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-reply-list { border-left-color: #3C5771; }
body[data-nox-theme="dark"] .nox-creact-btn { border-color: #3C5771; background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-creact-btn.nox-creact-check, body[data-nox-theme="dark"] .nox-legend-item.nox-creact-check { color: #92E8BA; }
body[data-nox-theme="dark"] .nox-creact-btn.nox-creact-wait, body[data-nox-theme="dark"] .nox-legend-item.nox-creact-wait { color: #E8D092; }
body[data-nox-theme="dark"] .nox-creact-btn.nox-creact-look, body[data-nox-theme="dark"] .nox-legend-item.nox-creact-look { color: #92B9E8; }
body[data-nox-theme="dark"] .nox-creact-btn.is-on.nox-creact-flag { background-color: #4B1B16; }
body[data-nox-theme="dark"] .nox-creact-btn.is-on.nox-creact-check { background-color: #1A462F; }
body[data-nox-theme="dark"] .nox-creact-btn.is-on.nox-creact-wait { background-color: #4B3B16; }
body[data-nox-theme="dark"] .nox-creact-btn.is-on.nox-creact-look { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-creact-btn.is-on.nox-creact-ask { background-color: #4B2616; }
body[data-nox-theme="dark"] .nox-react-legend { border-color: #3C5771; background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-comment-rich code, body[data-nox-theme="dark"] .nox-comment-rich pre { background-color: #1D3044; }
body[data-nox-theme="dark"] .nox-rte-bar { border-color: #3C5771; background-color: #16304B; }
body[data-nox-theme="dark"] .nox-rte-editor { border-color: #3C5771; background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-rte-panel { border-color: #3C5771; background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-gif-search { border-color: #3C5771; }
body[data-nox-theme="dark"] .nox-mention-confirm { border-color: #2B5B82; }
body[data-nox-theme="dark"] .nox-timer-state.nox-timer-paused, body[data-nox-theme="dark"] em.nox-timer-paused { color: #E8D092; }
body[data-nox-theme="dark"] .nox-danger-zone { border-color: #80392D; }
body[data-nox-theme="dark"] .nox-danger-label code { background-color: #4B1B16; }
body[data-nox-theme="dark"] .nox-avail-day { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-avail-day h3 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-avail-row input[type="time"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-avail-drop:hover { background-color: #4B1616; color: #E59B94; }
body[data-nox-theme="dark"] .nox-radio-row:hover { background-color: #2A303C; }
body[data-nox-theme="dark"] .nox-avail-limits select { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-book-filters select, body[data-nox-theme="dark"] .nox-book-filters input[type="date"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-book-day h3 { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-book-slot { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-book-slot:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-book-chosen { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-fc-replies { border-left-color: #3C5771; }
body[data-nox-theme="dark"] .nox-card.nox-composer { border-color: #2B5C82; }
body[data-nox-theme="dark"] .nox-composer .nox-composer-top textarea, body[data-nox-theme="dark"] .nox-composer .nox-rte-editor { background-color: #171A21; border-color: #2B5982; }
body[data-nox-theme="dark"] .nox-card.nox-post { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-pact { border-color: #3C5771; background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-pact-list { border-top-color: #3C5771; }
body[data-nox-theme="dark"] .nox-pact-row { border-bottom-color: #33577B; }
body[data-nox-theme="dark"] .nox-drawer { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-drawer-bar { border-bottom-color: #3C5771; background-color: #16304B; }
body[data-nox-theme="dark"] .nox-drawer .nox-panel-frag .nox-task-main > section.nox-card:not(.nox-subtasks):not(.nox-checklist):not(.nox-activity) { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-drawer .nox-panel-frag .nox-task-main > section.nox-card:not(.nox-subtasks):not(.nox-checklist):not(.nox-activity) > .nox-section-h { background-color: #183049; color: #A1BDD9; }
body[data-nox-theme="dark"] .nox-drawer .nox-panel-frag .nox-subtasks > .nox-subhead, body[data-nox-theme="dark"] .nox-drawer .nox-panel-frag .nox-subtasks > .nox-section-h { background-color: #163B4B; color: #92CBE8; }
body[data-nox-theme="dark"] .nox-drawer .nox-panel-frag .nox-checklist > .nox-subhead, body[data-nox-theme="dark"] .nox-drawer .nox-panel-frag .nox-checklist > .nox-section-h { background-color: #1C4540; color: #92E8DF; }
body[data-nox-theme="dark"] .nox-drawer .nox-panel-frag .nox-activity .nox-tabs { background-color: #162E4B; }
body[data-nox-theme="dark"] .nox-drawer .nox-panel-frag .nox-task-side > .nox-side-card:not(.nox-danger-zone) > .nox-section-h { background-color: #222D3F; color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-drawer .nox-panel-frag .nox-people > .nox-section-h { background-color: #22164B; }
body[data-nox-theme="dark"] .nox-drawer .nox-panel-frag .nox-danger-zone > h2 { background-color: #4B1B16; }
body[data-nox-theme="dark"] .nox-icon-btn { border-color: #3C5771; background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-icon-edit { color: #92B9E8; }
body[data-nox-theme="dark"] .nox-icon-edit:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-icon-archive { color: #E8D092; }
body[data-nox-theme="dark"] .nox-icon-archive:hover { background-color: #4B3B16; }
body[data-nox-theme="dark"] .nox-icon-restore { color: #92E8BA; }
body[data-nox-theme="dark"] .nox-icon-restore:hover { background-color: #1A462F; }
body[data-nox-theme="dark"] .nox-orders-filters select, body[data-nox-theme="dark"] .nox-orders-filters input { border-color: #3C5771; background-color: #171A21; }
body[data-nox-theme="dark"] .nox-code-badge { background-color: #1A462F; color: #92E8B8; }
body[data-nox-theme="dark"] .nox-stock-ok { background-color: #1A462F; color: #92E8B8; }
body[data-nox-theme="dark"] .nox-stock-low { background-color: #4B3B16; color: #E8CA92; }
body[data-nox-theme="dark"] .nox-stock-out { background-color: #4B1B16; color: #E79A93; border-color: #82362B; }
body[data-nox-theme="dark"] .nox-ptn-card { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-tier-badge { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-ptn-inline-form { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-ptn-idents code { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-form-card input[type="email"], body[data-nox-theme="dark"] .nox-form-card input[type="number"], body[data-nox-theme="dark"] .nox-form-card input[type="tel"], body[data-nox-theme="dark"] .nox-form-card input[type="search"], body[data-nox-theme="dark"] .nox-form-card input[type="password"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-form-card input[type="email"]:focus, body[data-nox-theme="dark"] .nox-form-card input[type="number"]:focus, body[data-nox-theme="dark"] .nox-form-card input[type="tel"]:focus, body[data-nox-theme="dark"] .nox-form-card input[type="search"]:focus, body[data-nox-theme="dark"] .nox-form-card input[type="password"]:focus { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-ptn-kpi { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-ptn-kpi-val { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-ptn-feed-name { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-ptn-feed-date { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-ptn-follow-date { color: var(--nox-ink); background-color: #16324B; }
body[data-nox-theme="dark"] .nox-ptn-follow-overdue .nox-ptn-follow-date { background-color: #4B1616; }
body[data-nox-theme="dark"] .nox-ptn-follow-body a { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-ptn-filters input[type="search"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-ptn-filters input[type="search"]:focus { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-ptn-filters select { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-ptn-filters select:focus { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-ptn-social-btn { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-ptn-social-btn.is-linkedin:hover { color: #92BDE8; }
body[data-nox-theme="dark"] .nox-ptn-social-btn.is-tiktok:hover { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-cal-chip-ptnf { background-color: #4A171F; color: #DE9BA4; }
body[data-nox-theme="dark"] .nox-cal-chip-ptnf.is-overdue { background-color: #4B1616; color: #E19999; }
body[data-nox-theme="dark"] .nox-cs-manage select, body[data-nox-theme="dark"] .nox-cs-manage textarea { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-cs-manage select:focus, body[data-nox-theme="dark"] .nox-cs-manage textarea:focus { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-cs-people-chip { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-cs-people-x:hover { background-color: #4B1616; }
body[data-nox-theme="dark"] .nox-cs-people-add select { background-color: #171A21; }
body[data-nox-theme="dark"] #comments .nox-cs-comment-edit textarea { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-card-title { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-main input[type="text"], body[data-nox-theme="dark"] .nox-main input[type="email"], body[data-nox-theme="dark"] .nox-main input[type="password"], body[data-nox-theme="dark"] .nox-main input[type="number"], body[data-nox-theme="dark"] .nox-main input[type="date"], body[data-nox-theme="dark"] .nox-main input[type="time"], body[data-nox-theme="dark"] .nox-main input[type="url"], body[data-nox-theme="dark"] .nox-main input[type="search"], body[data-nox-theme="dark"] .nox-main select, body[data-nox-theme="dark"] .nox-form-card input[type="text"], body[data-nox-theme="dark"] .nox-form-card input[type="email"], body[data-nox-theme="dark"] .nox-form-card input[type="password"], body[data-nox-theme="dark"] .nox-form-card input[type="number"], body[data-nox-theme="dark"] .nox-form-card input[type="date"], body[data-nox-theme="dark"] .nox-form-card input[type="time"], body[data-nox-theme="dark"] .nox-form-card input[type="url"], body[data-nox-theme="dark"] .nox-form-card select { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-main textarea, body[data-nox-theme="dark"] .nox-form-card textarea { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-main input:focus, body[data-nox-theme="dark"] .nox-main select:focus, body[data-nox-theme="dark"] .nox-main textarea:focus, body[data-nox-theme="dark"] .nox-form-card input:focus, body[data-nox-theme="dark"] .nox-form-card select:focus, body[data-nox-theme="dark"] .nox-form-card textarea:focus { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-main input:disabled, body[data-nox-theme="dark"] .nox-main select:disabled, body[data-nox-theme="dark"] .nox-main textarea:disabled { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-main input[type="file"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-form-card label, body[data-nox-theme="dark"] .nox-fld > label { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-btn-quiet { background-color: var(--nox-card); color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-btn-quiet:hover { background-color: #2A303C; border-color: #3B5872; color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-btn-ghost:hover { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-table thead th, body[data-nox-theme="dark"] .nox-table th { background-color: #16304B; }
body[data-nox-theme="dark"] .nox-table tbody td { border-bottom-color: #33577B; }
body[data-nox-theme="dark"] .nox-table tbody tr:hover { background-color: #2A303C; }
body[data-nox-theme="dark"] .nox-view-btn.is-active, body[data-nox-theme="dark"] .nox-range-btn.is-active { background-color: var(--nox-card); color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-notice-ok { background-color: #1B462B; border-color: #337A51; border-left-color: #337A51; color: #92E8BB; }
body[data-nox-theme="dark"] .nox-notice-error { background-color: #4B1B16; border-color: #82352B; border-left-color: #82352B; color: #E59995; }
body[data-nox-theme="dark"] .nox-notice-archived { background-color: #4B3816; color: #E8CA92; }
body[data-nox-theme="dark"] .nox-kpi:hover { border-color: #3B5872; }
body[data-nox-theme="dark"] .nox-login-error { background-color: #4B1B16; border-color: #82352B; border-left-color: #82352B; color: #E59995; }
body[data-nox-theme="dark"] .nox-cal-cell:not(.is-empty):hover { border-color: #3B5872; }
body[data-nox-theme="dark"] .nox-cal-cell.is-today { background-color: #16334B; }
body[data-nox-theme="dark"] .nox-cal-step { background-color: var(--nox-card); color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-cal-step:hover { background-color: #2A303C; border-color: #3B5872; }
body[data-nox-theme="dark"] .nox-board-col { background-color: #1B2F46; }
body[data-nox-theme="dark"] .nox-board-card:hover { border-color: #3B5872; }
body[data-nox-theme="dark"] .nox-card > .nox-empty:only-child::before { background-color: #16324B; }
body[data-nox-theme="dark"] .nox-comment-add input[type="text"], body[data-nox-theme="dark"] .nox-main .nox-comment-add input[type="text"] { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-icon-btn:hover { background-color: #2A303C; border-color: #3B5872; }
body[data-nox-theme="dark"] .nox-stat-link:hover { border-color: #3B5872; background-color: #2A303C; }
body[data-nox-theme="dark"] .nox-ptn-inline-form { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-ptn-inline-form label { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-att-metric { background-color: var(--nox-card); }
@media print {
	body[data-nox-theme="dark"].nox-app-body { background-color: var(--nox-card); }
}

/* ===== END GENERATED-DARK-SKIN ===== */

/* =====================================================================
   Dark skin — manual exceptions (v0.166.0, gray-slate). After the
   generated block so they win. Judgment calls a generator can't make.
   ===================================================================== */

/* Quiet/bordered controls must sit ABOVE the card tone, or they vanish */
body[data-nox-theme="dark"] .nox-btn-quiet,
body[data-nox-theme="dark"] .nox-icon-btn,
body[data-nox-theme="dark"] .nox-cal-step,
body[data-nox-theme="dark"] .nox-cal-today,
body[data-nox-theme="dark"] .nox-wgear,
body[data-nox-theme="dark"] .nox-wopen {
	background-color: #2A303C;
	border-color: #3E4550;
	color: #E8EAEE;
}
body[data-nox-theme="dark"] .nox-btn-quiet:hover,
body[data-nox-theme="dark"] .nox-icon-btn:hover,
body[data-nox-theme="dark"] .nox-cal-step:hover {
	background-color: #343B48;
	border-color: #4C5563;
	color: #FFFFFF;
}

body[data-nox-theme="dark"] .nox-btn { background-color: #1E63B8; color: #FFFFFF; }
body[data-nox-theme="dark"] .nox-btn:hover { background-color: #2A74CE; color: #FFFFFF; }
body[data-nox-theme="dark"] .nox-btn-small { background-color: #1E63B8; color: #FFFFFF; }
body[data-nox-theme="dark"] .nox-btn-small:hover { background-color: #2A74CE; color: #FFFFFF; }
body[data-nox-theme="dark"] .nox-btn-ghost { color: var(--nox-bright); background-color: transparent; }
body[data-nox-theme="dark"] .nox-btn-ghost:hover { background-color: #262B36; color: var(--nox-bright); }
body[data-nox-theme="dark"] .nox-cal-go { background-color: #1E63B8; border: 0; color: #fff; }
body[data-nox-theme="dark"] a { color: var(--nox-bright); }
body[data-nox-theme="dark"] .nox-btn-danger,
body[data-nox-theme="dark"] .nox-btn-stop { color: #FFFFFF; }

/* Fields: background-color ONLY — shorthand strips select chevrons and
   their no-repeat (the striping bug). Specificity boosted with .nox- scope. */
body[data-nox-theme="dark"] input[type="text"],
body[data-nox-theme="dark"] input[type="email"],
body[data-nox-theme="dark"] input[type="password"],
body[data-nox-theme="dark"] input[type="number"],
body[data-nox-theme="dark"] input[type="date"],
body[data-nox-theme="dark"] input[type="time"],
body[data-nox-theme="dark"] input[type="url"],
body[data-nox-theme="dark"] input[type="search"],
body[data-nox-theme="dark"] input[type="file"],
body[data-nox-theme="dark"] select,
body[data-nox-theme="dark"] textarea,
body[data-nox-theme="dark"] .nox-main select,
body[data-nox-theme="dark"] .nox-fld select,
body[data-nox-theme="dark"] .nox-wmenu-fld select,
body[data-nox-theme="dark"] .nox-form-card input[type="text"],
body[data-nox-theme="dark"] .nox-form-card select,
body[data-nox-theme="dark"] .nox-form-card textarea,
body[data-nox-theme="dark"] .nox-composer .nox-composer-top textarea,
body[data-nox-theme="dark"] .nox-composer .nox-rte-editor {
	background-color: #171A21;
	border-color: #353C48;
	color: var(--nox-ink);
	color-scheme: dark;
}
body[data-nox-theme="dark"] input:hover,
body[data-nox-theme="dark"] select:hover,
body[data-nox-theme="dark"] textarea:hover { border-color: #4A5260; }
body[data-nox-theme="dark"] input:focus,
body[data-nox-theme="dark"] select:focus,
body[data-nox-theme="dark"] textarea:focus,
body[data-nox-theme="dark"] .nox-main input:focus,
body[data-nox-theme="dark"] .nox-main select:focus,
body[data-nox-theme="dark"] .nox-main textarea:focus,
body[data-nox-theme="dark"] .nox-composer .nox-rte-editor:focus {
	background-color: #171A21;
	border-color: var(--nox-bright);
	box-shadow: 0 0 0 3px rgba(41, 171, 226, 0.22);
}
body[data-nox-theme="dark"] ::placeholder { color: #6C7684; opacity: 1; }
body[data-nox-theme="dark"] input:disabled,
body[data-nox-theme="dark"] select:disabled,
body[data-nox-theme="dark"] textarea:disabled { background-color: #1B1E25; color: #6C7684; }
body[data-nox-theme="dark"] .nox-main select,
body[data-nox-theme="dark"] .nox-form-card select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239BA3B0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 13px center;
}
body[data-nox-theme="dark"] input[type="checkbox"],
body[data-nox-theme="dark"] input[type="radio"] { accent-color: var(--nox-bright); }

/* Feed composer: its light gradient card is invisible to the generator */
body[data-nox-theme="dark"] .nox-card.nox-composer {
	background: var(--nox-card);
	border-color: var(--nox-line);
	box-shadow: var(--nox-e1);
}
body[data-nox-theme="dark"] .nox-composer-head { color: var(--nox-bright); }

/* Nav rail: active/hover pills were color-mixed toward white; on dark the
   pill is a translucent lift and the label goes white */
body[data-nox-theme="dark"] .nox-nav li.nox-nav-item.is-active .nox-nav-label {
	background: rgba(255, 255, 255, 0.10);
	color: #FFFFFF;
}
body[data-nox-theme="dark"] .nox-nav li.nox-nav-item.is-ready:hover .nox-nav-label {
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
}

/* Badges & chips: hairline so tinted pills read against gray cards */
body[data-nox-theme="dark"] .nox-badge,
body[data-nox-theme="dark"] .nox-pill,
body[data-nox-theme="dark"] .nox-chip { border: 1px solid rgba(255, 255, 255, 0.10); }

/* Filter pills: navy active state disappears against the dark canvas */
body[data-nox-theme="dark"] .nox-filter-tabs a.is-active {
	background-color: var(--nox-bright);
	border-color: var(--nox-bright);
	color: #0B1520;
}

body[data-nox-theme="dark"] .nox-table tbody td { border-bottom-color: #262B34; }
body[data-nox-theme="dark"] .nox-table tbody tr:hover { background-color: #232833; }

body[data-nox-theme="dark"] .nox-view-switch,
body[data-nox-theme="dark"] .nox-range-switch { background-color: #171A21; }
body[data-nox-theme="dark"] .nox-view-btn.is-active,
body[data-nox-theme="dark"] .nox-range-btn.is-active { background-color: #2A303C; color: var(--nox-ink); }

body[data-nox-theme="dark"] .nox-wtray .nox-wcard { background-color: #1B1E25; }
body[data-nox-theme="dark"] .nox-cal-cell.is-today { background-color: #1E2A3F; }
body[data-nox-theme="dark"] .nox-cal-cell.is-today .nox-cal-daynum { color: #FFFFFF; background: var(--nox-bright); }

body[data-nox-theme="dark"] .nox-card > .nox-empty:only-child::before {
	background-color: #262B36;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2329ABE2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 13.5 7 6h10l4 7.5'/><path d='M3 13.5V19a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-5.5'/><path d='M3 13.5h5a2 2 0 0 0 4 0h1a2 2 0 0 0 4 0h4'/></svg>");
}

/* =====================================================================
   UI v2 — Wave 5 (v0.167.0)
   Mobile: burger + off-canvas nav drawer, floating clock-in FAB.
   Appended last; overrides the old horizontal-strip mobile nav.
   ===================================================================== */

/* Burger: hidden on desktop, lives in the navy header on mobile */
.nox-burger { display: none; }

@media (max-width: 760px) {
	.nox-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		margin-right: 4px;
		padding: 0;
		background: rgba(255, 255, 255, 0.08);
		border: 0;
		border-radius: 10px;
		cursor: pointer;
		flex: 0 0 auto;
	}
	.nox-burger:hover { background: rgba(255, 255, 255, 0.16); }
	.nox-burger-bars { display: flex; flex-direction: column; gap: 4.5px; }
	.nox-burger-bars span {
		display: block;
		width: 19px;
		height: 2px;
		border-radius: 2px;
		background: #E8F2FB;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}
	body.nox-nav-open .nox-burger-bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
	body.nox-nav-open .nox-burger-bars span:nth-child(2) { opacity: 0; }
	body.nox-nav-open .nox-burger-bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

	/* Off-canvas drawer — replaces the horizontal strip entirely */
	.nox-layout { grid-template-columns: 1fr; }
	.nox-nav {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(300px, 84vw);
		transform: translateX(-105%);
		transition: transform 0.25s ease;
		z-index: 96;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 14px 10px calc(20px + env(safe-area-inset-bottom));
		border-right: 1px solid rgba(255, 255, 255, 0.08);
		border-bottom: 0;
	}
	body.nox-nav-open .nox-nav { transform: none; }
	body.nox-nav-open { overflow: hidden; }

	/* Restore the vertical menu inside the drawer */
	.nox-nav ul {
		display: block;
		overflow: visible;
		padding: 4px 2px;
	}
	.nox-nav li,
	.nox-nav li.nox-nav-item {
		flex: none;
		padding: 0;
		margin: 0 0 2px;
		border: 0;
	}
	.nox-nav li .nox-nav-label {
		display: flex;
		align-items: center;
		gap: 11px;
		padding: 11px 12px;
		border-radius: 10px;
		font-size: 15px;
	}
	.nox-nav-account { margin: 4px 2px 14px; }

	.nox-nav-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 95;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}
	body.nox-nav-open .nox-nav-backdrop { opacity: 1; pointer-events: auto; }
}

@media (min-width: 761px) {
	.nox-nav-backdrop { display: none; }
}

/* Floating clock-in / clock-out (≤900px, where the header version hides) */
@media (max-width: 900px) {
	.nox-att-quick {
		display: flex;
		position: fixed;
		right: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom));
		z-index: 80;
		flex-direction: column;
		align-items: flex-end;
		gap: 9px;
		margin: 0;
	}
	.nox-att-quick-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 50px;
		padding: 0 20px;
		font-size: 14.5px;
		font-weight: 700;
		border-radius: 999px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	}
	.nox-att-quick-ic svg { width: 16px; height: 16px; }
	/* Floating context: solid, self-evident colours (the header tints
	   were designed against navy and vanish over page content) */
	.nox-att-quick .nox-att-q-in    { background: #1E9E5A; color: #fff; border-color: transparent; }
	.nox-att-quick .nox-att-q-break { background: #C08A00; color: #fff; border-color: transparent; }
	.nox-att-quick .nox-att-q-out   { background: #C7362F; color: #fff; border-color: transparent; }
	.nox-att-quick .nox-att-q-out:hover { background: #A82C25; }

	/* Content never hides behind the FAB */
	.nox-main { padding-bottom: 110px; }
}

/* =====================================================================
   UI v2 — Wave 6 (v0.168.0): date-picker popover (.nox-dp)
   ===================================================================== */

.nox-dp {
	position: absolute;
	z-index: 120;
	width: 288px;
	background: var(--nox-white);
	border: 1px solid var(--nox-line);
	border-radius: 14px;
	box-shadow: var(--nox-e2);
	padding: 12px;
	font-size: 14px;
}
.nox-dp-head { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.nox-dp-nav {
	width: 32px;
	height: 34px;
	flex: 0 0 auto;
	border: 1px solid var(--nox-line);
	border-radius: 8px;
	background: var(--nox-white);
	color: var(--nox-navy-ink);
	font-size: 16px;
	cursor: pointer;
}
.nox-dp-nav:hover { background: var(--nox-pale); }
.nox-dp .nox-dp-month,
.nox-dp .nox-dp-year {
	height: 34px;
	padding: 0 26px 0 10px;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 8px;
	background-position: right 9px center;
}
.nox-dp .nox-dp-month { flex: 1; min-width: 0; }
.nox-dp .nox-dp-year { width: 84px; flex: 0 0 auto; }
.nox-dp-dow {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-bottom: 2px;
}
.nox-dp-dow span {
	text-align: center;
	font-family: var(--nox-font-head);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nox-muted);
	padding: 3px 0;
}
.nox-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.nox-dp-grid button {
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--nox-ink);
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
}
.nox-dp-grid button:hover { background: var(--nox-pale); }
.nox-dp-grid button.is-today { box-shadow: inset 0 0 0 1px var(--nox-blue); color: var(--nox-blue-ink); font-weight: 700; }
.nox-dp-grid button.is-selected { background: var(--nox-blue); color: #fff; font-weight: 700; }
.nox-dp-foot {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--nox-line);
}
.nox-dp-act {
	border: 0;
	background: transparent;
	color: var(--nox-blue-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
}
.nox-dp-act:hover { background: var(--nox-pale); }

body[data-nox-theme="dark"] .nox-dp { background: var(--nox-card); border-color: var(--nox-line); }
body[data-nox-theme="dark"] .nox-dp-nav { background: #2A303C; border-color: #3E4550; color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-dp-nav:hover { background: #343B48; }
body[data-nox-theme="dark"] .nox-dp-grid button { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-dp-grid button:hover { background: #262B36; }
body[data-nox-theme="dark"] .nox-dp-grid button.is-today { box-shadow: inset 0 0 0 1px var(--nox-bright); color: var(--nox-bright); }
body[data-nox-theme="dark"] .nox-dp-grid button.is-selected { background: #1E63B8; color: #fff; }
body[data-nox-theme="dark"] .nox-dp-act { color: var(--nox-bright); }
body[data-nox-theme="dark"] .nox-dp-act:hover { background: #262B36; }

/* =====================================================================
   Workforce person v2 (v0.174.0): tabbed layout + PIF field grid
   ===================================================================== */
.nox-wf-pif-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 20px;
	align-items: start;
}
.nox-wf-pif-grid h3.nox-wf-sub,
.nox-wf-pif-grid > p {
	grid-column: 1 / -1;
}
.nox-pif-fld {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 12px;
	min-width: 0;
}
.nox-pif-fld label { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nox-pif-fld input,
.nox-pif-fld select,
.nox-pif-fld textarea { width: 100%; }
.nox-pif-wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
	.nox-wf-pif-grid { grid-template-columns: 1fr; }
}

body[data-nox-theme="dark"] .nox-wf-pif-grid h3.nox-wf-sub { color: var(--nox-ink); }

/* =====================================================================
   UI v2 — Wave 7 (v0.175.0): Workforce module design pass
   ===================================================================== */

/* Module accent binding for the v2 chip system (old .nox-ico rule superseded) */
.nox-mod-workforce { --mod: #5A67D8; }

/* Person hero — mirrors the task-detail hero language */
.nox-wf-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
}
.nox-wf-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mod, var(--nox-blue)), var(--nox-bright));
	opacity: 0.85;
}
.nox-wf-hero-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nox-wf-hero-ava .nox-ava { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mod, var(--nox-blue)) 22%, transparent); }
.nox-wf-hero-id h1 {
	margin: 0;
	font-size: 23px;
	line-height: 1.2;
}
.nox-wf-hero-sub {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 3px;
	font-size: 13.5px;
	color: var(--nox-muted);
}
.nox-wf-hero-dot { opacity: 0.6; }
.nox-wf-hero-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Forms & agreements: soft interactive rows instead of a bare list */
.nox-wf-forms { gap: 4px; }
.nox-wf-forms li {
	padding: 8px 10px;
	border-radius: 10px;
	transition: background 0.12s ease;
}
.nox-wf-forms li:hover { background: var(--nox-pale); }

/* PIF group headings: breathing room + hairline separators inside the grid */
.nox-wf-pif-grid h3.nox-wf-sub {
	margin: 18px 0 8px;
	padding-top: 14px;
	border-top: 1px solid var(--nox-line);
}
.nox-wf-pif-grid h3.nox-wf-sub:first-of-type {
	margin-top: 4px;
	padding-top: 0;
	border-top: 0;
}

/* Alert / danger cards: keep their signal borders on v2 radii */
.nox-wf-alerts { border-left-width: 3px; }
.nox-wf-danger { border-left-width: 3px; }

/* Documentation upload bar */
.nox-wf-doc-upload {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: flex-end;
	margin-bottom: 16px;
	padding: 14px;
	background: var(--nox-surface-2, var(--nox-pale));
	border: 1px solid var(--nox-line);
	border-radius: 12px;
}
.nox-wf-doc-upload label { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.nox-wf-doc-upload .nox-wfdu-cat { flex: 0 0 auto; }
.nox-wf-doc-upload .nox-wfdu-file { flex: 1 1 220px; }
.nox-wf-doc-upload .nox-wfdu-note { flex: 1 1 180px; }
@media (max-width: 700px) {
	.nox-wf-doc-upload { flex-direction: column; align-items: stretch; }
	.nox-wf-doc-upload .nox-btn { width: 100%; }
}

/* ---- Dark variants (appended after the generated skin, so manual) ---- */
body[data-nox-theme="dark"] .nox-wf-hero { background: var(--nox-card); }
body[data-nox-theme="dark"] .nox-wf-hero-sub { color: var(--nox-muted); }
body[data-nox-theme="dark"] .nox-wf-forms li:hover { background: #232833; }
body[data-nox-theme="dark"] .nox-wf-pif-grid h3.nox-wf-sub { border-top-color: var(--nox-line); }
body[data-nox-theme="dark"] .nox-wf-doc-upload { background: #1B1E25; border-color: var(--nox-line); }

/* Wave 7.1 (v0.176.0): field titles bold across the Workforce module + PIF */
.nox-wf-pif-grid .nox-pif-fld > label,
.nox-wf-doc-upload > label,
.nox-wf-grid .nox-card form label,
.nox-wf-grid .nox-card form > label {
	font-weight: 650;
	color: var(--nox-ink);
}
.nox-wf-pif-grid .nox-pif-fld > label .nox-pill { font-weight: 700; } /* pills keep their own scale */

body[data-nox-theme="dark"] .nox-wf-pif-grid .nox-pif-fld > label,
body[data-nox-theme="dark"] .nox-wf-doc-upload > label,
body[data-nox-theme="dark"] .nox-wf-grid .nox-card form label {
	color: var(--nox-ink);
}

/* ==========================================================================
   Print letterhead (v0.184.0) — brand header for browser-printed documents
   (personal forms, PTO requests). Hidden on screen; the print stylesheet
   hides the app chrome, so this is the only brand mark on paper.
   ========================================================================== */
.nox-print-head { display: none; }

@media print {
	.nox-print-head {
		display: flex !important;
		align-items: center;
		gap: 14px;
		padding: 14px 18px;
		margin: 0 0 18px;
		background: #0A1F3C !important;
		border-radius: 6px;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.nox-print-head-x { display: flex; flex-direction: column; gap: 2px; margin-left: auto; text-align: right; }
	.nox-print-head-doc { font: 400 11px/1.2 'Open Sans', sans-serif; color: #29ABE2; }
}

/* ==========================================================================
   Partners CSV import (v0.186.0)
   ========================================================================== */
.nox-import-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.nox-import-summary .nox-chip { background: #EEF2F7; border-radius: 999px; padding: 4px 12px; font: 600 12.5px/1.4 'Open Sans', sans-serif; color: #0F2233; }
.nox-import-summary .nox-chip-ok { background: #E2F4EA; color: #14683C; }
.nox-import-summary .nox-chip-err { background: #FBE9E7; color: #9C2B1F; }
.nox-import-table td { vertical-align: top; }
.nox-import-table tr.nox-imp-error td { background: #FDF1F0; }
.nox-import-table tr.nox-imp-skip td { background: #F6F7F9; color: #5B7286; }
.nox-import-upload label { display: block; margin: 10px 0; font-weight: 650; }
.nox-import-upload input[type="file"] { display: block; margin-top: 6px; font-weight: 400; }
.nox-import-policy { border: 1px solid #E1E8EF; border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.nox-import-policy legend { font: 700 13px/1.4 'Montserrat', sans-serif; padding: 0 6px; }
.nox-import-policy label { display: block; margin: 6px 0; font-weight: 400; }
.nox-import-confirm { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
body[data-nox-theme="dark"] .nox-import-summary .nox-chip { background: #232833; color: #D4DAE3; }
body[data-nox-theme="dark"] .nox-import-summary .nox-chip-ok { background: #17332A; color: #6FD1A0; }
body[data-nox-theme="dark"] .nox-import-summary .nox-chip-err { background: #392320; color: #E8907F; }
body[data-nox-theme="dark"] .nox-import-table tr.nox-imp-error td { background: #2C2020; }
body[data-nox-theme="dark"] .nox-import-table tr.nox-imp-skip td { background: #1B1E25; color: #8B94A3; }
body[data-nox-theme="dark"] .nox-import-policy { border-color: #2A2F3A; }

/* ==========================================================================
   Wave 8 (v0.188.0) — Inventory overview: compact Import button, accented
   storage cards, ghost add-card. Exports moved to the Reports hub.
   ========================================================================== */
.nox-page-head.nox-head-tabs > .nox-btn-quiet { justify-self: end; width: max-content; display: inline-flex; align-items: center; gap: 8px; }

.nox-inv-storages { align-items: stretch; }
.nox-inv-storage { position: relative; overflow: hidden; padding: 18px 18px 16px; border-radius: 14px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.nox-inv-storage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #1B9C8F, #29ABE2); }
.nox-inv-storage:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 31, 60, .10); border-color: #1B9C8F; }
.nox-inv-storage .nox-inv-ico { width: 34px; height: 34px; border-radius: 9px; background: rgba(27, 156, 143, .12); color: #1B9C8F; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.nox-inv-storage .nox-inv-ico svg { width: 18px; height: 18px; }
.nox-inv-storage h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.nox-inv-nums { gap: 0; font-size: 11.5px; }
.nox-inv-nums span { flex: 1; align-items: flex-start; padding: 0 12px; border-left: 1px solid var(--nox-line); }
.nox-inv-nums span:first-child { padding-left: 0; border-left: 0; }
.nox-inv-nums strong { font-size: 21px; font-variant-numeric: tabular-nums; color: #1B9C8F; }
.nox-inv-storage.is-empty .nox-inv-nums strong { color: var(--nox-muted); }
.nox-inv-add-storage { justify-content: center; border: 1.5px dashed var(--nox-line); background: transparent; box-shadow: none; }
.nox-inv-add-storage::before { display: none; }
.nox-inv-add-storage:hover { border-color: #1B9C8F; transform: none; box-shadow: none; }
.nox-inv-add-storage label { font: 700 11px/1 var(--nox-font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--nox-muted); margin-bottom: 10px; }
.nox-inv-exports-pointer { margin: -4px 0 18px; }
.nox-inv-exports-pointer a { font-weight: 650; }

body[data-nox-theme="dark"] .nox-inv-storage .nox-inv-ico { background: rgba(27, 156, 143, .16); }
body[data-nox-theme="dark"] .nox-inv-storage:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }

/* Inner-box pack controls (v0.191.0) */
.nox-box-actions { white-space: nowrap; }
.nox-box-pack { display: inline-flex; gap: 6px; align-items: center; margin-right: 8px; }
.nox-box-pack input[type="number"] { width: 58px; padding: 4px 6px; border: 1px solid var(--nox-line); border-radius: 8px; }
.nox-btn-small.nox-btn-ghost { background: transparent; color: var(--nox-blue-ink); border: 1px solid var(--nox-line); }
.nox-btn-small.nox-btn-ghost:hover { border-color: var(--nox-bright); }
body[data-nox-theme="dark"] .nox-box-pack input[type="number"] { background: #1B1E25; border-color: #2A2F3A; color: #D4DAE3; }

/* Confirm modal (v0.192.0) */
.nox-confirm-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(10, 31, 60, .45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.nox-confirm-overlay[hidden] { display: none; }
.nox-confirm-card { background: var(--nox-card, var(--nox-white)); border: 1px solid var(--nox-line); border-radius: 14px; box-shadow: 0 24px 60px rgba(10, 31, 60, .30); max-width: 440px; width: 100%; padding: 22px 24px; }
.nox-confirm-card h3 { margin: 0 0 8px; font: 700 16px/1.3 var(--nox-font-head); color: var(--nox-ink); }
.nox-confirm-card p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--nox-ink); }
.nox-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.nox-confirm-cancel { background: transparent; color: var(--nox-muted); border: 1px solid var(--nox-line); border-radius: 10px; padding: 9px 16px; cursor: pointer; }
.nox-confirm-cancel:hover { color: var(--nox-ink); border-color: var(--nox-muted); }
.nox-confirm-ok { background: var(--nox-blue); color: #FFFFFF; border: 0; border-radius: 10px; padding: 9px 18px; cursor: pointer; }
.nox-confirm-ok:hover { background: var(--nox-bright); }
body[data-nox-theme="dark"] .nox-confirm-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }

/* ==========================================================================
   Blocked tasks screen (v0.194.0)
   ========================================================================== */
.nox-blocked-tabs { justify-self: end; }
.nox-blocked-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.nox-blocked-summary .nox-chip { background: #EEF2F7; border-radius: 999px; padding: 4px 12px; font: 600 12.5px/1.4 'Open Sans', sans-serif; color: #0F2233; }
.nox-blocked-summary .nox-chip-err { background: #FBE9E7; color: #9C2B1F; }
.nox-blocked-group { margin-bottom: 16px; }
.nox-blocked-group-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; }
.nox-blocked-group-name { font-weight: 700; color: var(--nox-navy-ink); }
.nox-blocked-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: #FBE9E7; color: #9C2B1F; font: 700 12px/1 'Open Sans', sans-serif; }
.nox-blocked-board { margin-left: auto; }
.nox-blocked-table th[scope="row"] { font-weight: 600; }
.nox-blocked-table th[scope="row"] a { color: var(--nox-blue-ink); text-decoration: none; }
.nox-blocked-table th[scope="row"] a:hover { text-decoration: underline; }
.nox-blocked-table .nox-tone-alert { color: #9C2B1F; font-weight: 650; }
body[data-nox-theme="dark"] .nox-blocked-summary .nox-chip { background: #232833; color: #D4DAE3; }
body[data-nox-theme="dark"] .nox-blocked-summary .nox-chip-err,
body[data-nox-theme="dark"] .nox-blocked-group-count { background: #392320; color: #E8907F; }
body[data-nox-theme="dark"] .nox-blocked-group-name { color: #E6EAF0; }

/* ==========================================================================
   Sales — order detail (expanded row, v0.195.0)
   ========================================================================== */
.nox-order-detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; padding: 4px 2px 6px; }
.nox-order-detail-h { margin: 0 0 8px; font: 700 12px/1.3 var(--nox-font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--nox-muted); }
.nox-order-detail-facts { margin: 0; display: flex; flex-direction: column; gap: 0; }
.nox-order-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-top: 1px solid var(--nox-line); }
.nox-order-fact:first-child { border-top: 0; }
.nox-order-fact dt { margin: 0; font-size: 12.5px; color: var(--nox-muted); }
.nox-order-fact dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--nox-ink); text-align: right; }
.nox-order-fact-total dt, .nox-order-fact-total dd { font-weight: 700; color: var(--nox-navy-ink); }
.nox-order-fact-refund dd { color: #9C2B1F; }
.nox-order-fact-sep { border-top-width: 2px; margin-top: 4px; }
.nox-order-code { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--nox-pale); color: var(--nox-blue-ink); font: 600 11px/1.5 'Open Sans', sans-serif; }
.nox-order-partner { color: var(--nox-muted); }
@media ( max-width: 720px ) { .nox-order-detail { grid-template-columns: 1fr; gap: 16px; } }
body[data-nox-theme="dark"] .nox-order-code { background: #1B2A3A; color: #7Fc4ec; }
body[data-nox-theme="dark"] .nox-order-fact-total dt, body[data-nox-theme="dark"] .nox-order-fact-total dd { color: #E6EAF0; }
body[data-nox-theme="dark"] .nox-order-fact-refund dd { color: #E8907F; }

/* Sales — order customer (v0.196.0) */
.nox-order-cust-name { display: block; font-weight: 600; color: var(--nox-ink); }
.nox-order-cust-email { display: block; font-size: 12px; color: var(--nox-blue-ink); text-decoration: none; }
.nox-order-cust-email:hover { text-decoration: underline; }

/* ==========================================================================
   Who's working now — state icon + exact duration (v0.198.0)
   ========================================================================== */
.nox-w-worker { display: flex; align-items: center; gap: 10px; }
.nox-w-state-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; }
.nox-w-state-working .nox-w-state-ic { color: #1E9E5A; background: rgba(30, 158, 90, .12); }
.nox-w-state-break .nox-w-state-ic { color: #C08A00; background: rgba(192, 138, 0, .14); }
.nox-w-worker .nox-person { flex: 1 1 auto; min-width: 0; }
.nox-w-worker-time { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; flex: 0 0 auto; }
.nox-w-worker-dur { font: 700 13.5px/1 var(--nox-font-head); font-variant-numeric: tabular-nums; color: var(--nox-ink); }
.nox-w-state-working .nox-w-worker-dur { color: #167A45; }
.nox-w-state-break .nox-w-worker-dur { color: #9A6E00; }
.nox-w-worker-lbl { font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--nox-muted); margin-top: 2px; }
body[data-nox-theme="dark"] .nox-w-state-working .nox-w-state-ic { color: #43C77E; background: rgba(67, 199, 126, .16); }
body[data-nox-theme="dark"] .nox-w-state-break .nox-w-state-ic { color: #E0A72A; background: rgba(224, 167, 42, .18); }
body[data-nox-theme="dark"] .nox-w-worker-dur { color: #D4DAE3; }
body[data-nox-theme="dark"] .nox-w-state-working .nox-w-worker-dur { color: #56D68E; }
body[data-nox-theme="dark"] .nox-w-state-break .nox-w-worker-dur { color: #E8B84A; }

/* Person chips inside tables / meta rows (v0.199.0 avatar sweep) */
td .nox-person, .nox-inv-item-meta .nox-person, .nox-ptn-act-author .nox-person,
.nox-readback dd .nox-person { vertical-align: middle; }
.nox-inv-item-meta .nox-person, .nox-ptn-act-author .nox-person { display: inline-flex; gap: 5px; }
.nox-inv-item-meta .nox-person-name, .nox-ptn-act-author .nox-person-name { font-weight: 500; }
.nox-board-assignee .nox-person { gap: 5px; }
.nox-board-assignee .nox-person-name { font-size: 11.5px; }
.nox-readback dd .nox-person { display: inline-flex; }

/* =====================================================================
 * v0.203.0 — Production runs
 * ================================================================== */

.nox-notice-info { background: var(--nox-pale, #E8F2FB); color: var(--nox-navy-ink, #0A1F3C); border-left: 4px solid var(--nox-bright, #29ABE2); }
.nox-notice-warn { background: #FBF3E2; color: #6B4E00; border-left: 4px solid #C08A00; }
.nox-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.nox-card-head h2 { margin: 0; font-size: 16px; }
.nox-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 18px; }
.nox-danger-card { border-color: #F2C6B8; }
.nox-danger-card h2 { color: #B4472A; }

/* Runs list */
.nox-prod-mini-bar { display: inline-block; vertical-align: middle; width: 74px; height: 8px; border-radius: 999px; background: var(--nox-pale, #E8F2FB); overflow: hidden; margin-right: 7px; }
.nox-prod-mini-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--nox-blue, #1554A0), var(--nox-bright, #29ABE2), #1B9C8F); }

/* Run state badges */
.nox-prod-state-in_progress { background: #E4F2FB; color: var(--nox-blue-ink, #1554A0); }
.nox-prod-state-paused { background: #FBF3E2; color: #8A6400; }
.nox-prod-state-completed { background: #EAF7F1; color: #1E9E5A; }
.nox-prod-state-closed { background: #EDF1F5; color: #5B7286; }
.nox-prod-state-cancelled { background: #FDEFE9; color: #B4472A; }
.nox-prod-sku-chip { background: var(--nox-pale, #E8F2FB); color: var(--nox-navy-ink, #0A1F3C); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.nox-prod-src { background: #EAF7F1; color: #1E9E5A; }

/* Progress card */
.nox-prod-progress-row { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.nox-prod-progress-left { flex: 1; min-width: 240px; }
.nox-prod-progress-label { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--nox-muted, #5B7286); margin-bottom: 7px; flex-wrap: wrap; }
.nox-prod-progress-label strong { color: var(--nox-navy-ink, #0A1F3C); font-size: 15px; }
.nox-prod-bar { height: 14px; background: var(--nox-pale, #E8F2FB); border-radius: 999px; overflow: hidden; }
.nox-prod-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--nox-blue, #1554A0), var(--nox-bright, #29ABE2), #1B9C8F); transition: width .3s ease; }
.nox-prod-kpis { display: flex; gap: 12px; flex-wrap: wrap; }
.nox-prod-kpi { background: #F8FBFE; border: 1px solid var(--nox-line, #E1E8EF); border-radius: 12px; padding: 10px 16px; text-align: center; min-width: 108px; }
.nox-prod-kpi-v { display: block; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 18px; color: var(--nox-navy-ink, #0A1F3C); }
.nox-prod-kpi.is-over .nox-prod-kpi-v { color: #C08A00; }
.nox-prod-kpi-l { display: block; font-size: 11px; color: var(--nox-muted, #5B7286); margin-top: 2px; }

/* Timeline */
.nox-prod-timeline { display: flex; gap: 0; overflow-x: auto; padding: 6px 0 2px; }
.nox-prod-step { flex: 1; min-width: 150px; position: relative; padding: 0 8px; text-align: center; }
.nox-prod-step-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; margin: 0 auto 10px; position: relative; z-index: 2; border: 3px solid var(--nox-line, #E1E8EF); background: #fff; color: var(--nox-muted, #5B7286); }
.nox-prod-step:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: 50%; width: 100%; height: 3px; background: var(--nox-line, #E1E8EF); z-index: 1; }
.nox-prod-step.is-done .nox-prod-step-dot { background: #1E9E5A; border-color: #1E9E5A; color: #fff; }
.nox-prod-step.is-done:not(:last-child)::after { background: #1E9E5A; }
.nox-prod-step.is-current .nox-prod-step-dot { border-color: var(--nox-bright, #29ABE2); color: var(--nox-blue-ink, #1554A0); box-shadow: 0 0 0 5px rgba(41, 171, 226, .18); }
.nox-prod-step-name { font-size: 12.5px; font-weight: 600; color: var(--nox-navy-ink, #0A1F3C); margin-bottom: 3px; }
.nox-prod-step.is-current .nox-prod-step-name { color: var(--nox-blue-ink, #1554A0); }
.nox-prod-step-meta { font-size: 11px; color: var(--nox-muted, #5B7286); line-height: 1.5; }
.nox-prod-t-ok { color: #1E9E5A; font-weight: 600; }
.nox-prod-t-run { color: var(--nox-blue-ink, #1554A0); font-weight: 700; }
.nox-prod-t-over { color: #C08A00; font-weight: 700; }
.nox-prod-step-person { display: flex; justify-content: center; margin-top: 5px; }
.nox-prod-step-task { font-size: 11px; margin-top: 4px; }
.nox-prod-complete-form { margin-top: 10px; background: #F8FBFE; border: 1px solid var(--nox-line, #E1E8EF); border-radius: 10px; padding: 10px; text-align: left; }
.nox-prod-complete-form .nox-field { margin: 0 0 8px; }
.nox-prod-complete-form label { display: block; font-size: 11px; color: var(--nox-muted, #5B7286); margin-bottom: 2px; }
.nox-prod-loss { color: #B4472A; font-weight: 600; }

/* v0.203.1 — head buttons must never overlap the centered tabs: let the
 * right column wrap inside its grid cell instead of overflowing left. */
.nox-page-head.nox-head-tabs .nox-head-right {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	min-width: 0;
}
@media (max-width: 1100px) {
	.nox-page-head.nox-head-tabs { grid-template-columns: 1fr; }
	.nox-page-head.nox-head-tabs .nox-filter-tabs,
	.nox-page-head.nox-head-tabs .nox-head-right { justify-content: flex-start; }
}

/* v0.205.0 — run panel inside a checkpoint task */
.nox-prod-task-panel { border-left: 4px solid var(--nox-bright, #29ABE2); }
.nox-prod-task-panel .nox-prod-kpis { margin: 4px 0 12px; }
.nox-prod-task-actions { display: flex; gap: 10px; margin: 4px 0 10px; flex-wrap: wrap; }
.nox-prod-task-panel .nox-prod-complete-form { max-width: 460px; }

/* v0.206.0 — stock verification */
.nox-stock-neg { color: #B4472A; font-weight: 700; }
.nox-verify-armed { background: #EAF7F1; color: #1E9E5A; }
.nox-verify-off { background: #FBF3E2; color: #8A6400; }
.nox-verify-cell { white-space: nowrap; }
.nox-verify-cell input { margin-right: 6px; }

/* v0.207.0 — run close card + dashboard runs */
.nox-prod-close-card { border-left: 4px solid var(--nox-green, #1E9E5A); }
.nox-prod-close-form .nox-form-row { display: flex; gap: 24px; flex-wrap: wrap; }
.nox-dash-runs { margin-top: 12px; }
.nox-dash-run { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--nox-line, #E1E8EF); }
.nox-dash-run:first-child { border-top: 0; }
.nox-dash-run .nox-prod-mini-bar { flex: 0 0 90px; height: 6px; border-radius: 3px; background: var(--nox-line, #E1E8EF); overflow: hidden; }
.nox-dash-run .nox-prod-mini-fill { height: 100%; background: var(--nox-bright, #29ABE2); }

/* v0.208.0 — production dashboard: floor cards + state strip */
.nox-floor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 20px; }
.nox-floor-card { border-left: 4px solid var(--nox-bright, #29ABE2); }
.nox-floor-card.is-paused { border-left-color: #C08A00; }
.nox-floor-card.nox-floor-close { border-left-color: var(--nox-green, #1E9E5A); background: #F4FBF7; }
.nox-floor-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nox-floor-step { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
.nox-floor-times { display: flex; gap: 14px; font-size: 13px; color: var(--nox-muted, #5B7286); margin-bottom: 8px; }
.nox-floor-over { color: #C08A00; font-weight: 700; }
.nox-floor-card .nox-prod-mini-bar { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--nox-line, #E1E8EF); overflow: hidden; }
.nox-floor-card .nox-prod-mini-fill { display: block; height: 100%; background: var(--nox-bright, #29ABE2); }
.nox-floor-card.is-paused .nox-prod-mini-fill { background: #C08A00; }
.nox-floor-sub { font-size: 12px; color: var(--nox-muted, #5B7286); margin-top: 4px; }
.nox-btn-close { background: var(--nox-green, #1E9E5A); }
.nox-runstate-strip { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.nox-rs { font-weight: 800; }
.nox-rs-run { color: var(--nox-blue-ink, #1554A0); }
.nox-rs-pause { color: #8A6400; }
.nox-rs-close { color: var(--nox-green, #1E9E5A); }

/* v0.209.0 — rename forms + compartments + sync health */
.nox-rename-form { display: inline-flex; gap: 6px; align-items: center; }
.nox-rename-form input[type="text"] { width: 200px; }
.nox-slot-h { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--nox-muted, #5B7286); border-bottom: 1px solid var(--nox-line, #E1E8EF); padding-bottom: 4px; }

/* v0.211.0 — located reconciliation */
.nox-loc-mismatch { color: #8A6400; font-weight: 700; }

/* v0.212.0 — sales-source storage */
.nox-sales-source-badge { background: #FDEEE7; color: #B4472A; margin-left: 8px; font-size: 11px; vertical-align: middle; }
.nox-sales-source-card { border-left: 4px solid var(--nox-line, #E1E8EF); }
.nox-sales-source-card.is-on { border-left-color: #E2683C; background: #FFF9F6; }
.nox-sales-source-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.nox-sales-source-form .nox-field-hint { display: block; margin-top: 6px; }

/* v0.214.0 — export format triples */
.nox-export-links { display: inline-flex; gap: 4px; }
.nox-export-links .nox-btn-quiet { padding: 6px 10px; }

/* v0.215.0 — verification physical mirror line */
.nox-verify-phys { font-size: 12px; color: var(--nox-muted, #5B7286); }
.nox-verify-phys-new { color: #8A6400; }

/* v0.216.0 — transfer card */
.nox-transfer-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nox-transfer-form select { min-width: 220px; }

/* v0.218.0 — inventory dashboard health + recount, storages search + rich cards */
.nox-inv-health { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.nox-health-cell { background: var(--nox-white, #fff); border-radius: 14px; padding: 14px 18px; box-shadow: 0 1px 2px rgba(10,31,60,.06), 0 4px 14px rgba(10,31,60,.05); display: flex; align-items: center; gap: 12px; }
.nox-health-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.nox-health-dot.h-ok { background: #1E9E5A; }
.nox-health-dot.h-warn { background: #C08A00; }
.nox-health-dot.h-bad { background: #C43D3D; }
.nox-health-cell b { font-family: Montserrat, sans-serif; font-size: 15px; display: block; }
.nox-health-cell small { color: var(--nox-muted, #5B7286); font-size: 12px; }
.nox-health-cell > a { margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nox-diff-chip { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: #FBF3DF; color: #8A6400; }
.nox-diff-chip.nox-diff-neg { background: #FDECEC; color: #C43D3D; }
.nox-inv-search { display: flex; gap: 10px; margin: 4px 0 18px; align-items: center; }
.nox-inv-search input[type="search"] { flex: 1; max-width: 520px; padding: 11px 16px 11px 40px; border: 1px solid var(--nox-line, #E1E8EF); border-radius: 12px; font-size: 14.5px; background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%235B7286" stroke-width="2"><circle cx="7" cy="7" r="5"/><path d="M11 11l4 4"/></svg>') 14px 50% no-repeat; }
.nox-inv-searchhits { list-style: none; margin: 0; padding: 0; }
.nox-inv-searchhits li + li { border-top: 1px solid var(--nox-line, #E1E8EF); }
.nox-inv-searchhits a { display: flex; gap: 14px; align-items: baseline; padding: 10px 4px; text-decoration: none; color: inherit; }
.nox-inv-searchhits a:hover { background: #F7FAFD; }
.nox-hit-name { font-weight: 600; flex: 1; }
.nox-hit-path { color: var(--nox-muted, #5B7286); font-size: 12.5px; }
.nox-hit-qty { font-weight: 700; font-size: 13px; white-space: nowrap; }
.nox-inv-storage.is-sales { border-top: 3px solid #E2683C; }
.nox-low-badge { background: #FBF3DF; color: #8A6400; margin-left: 6px; font-size: 11px; }
.nox-inv-compbar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: #EDF2F7; margin: 10px 0 8px; }
.nox-inv-compbar span { height: 100%; display: block; }
.nox-inv-lastmove { display: block; color: #8CA0B3; font-size: 11.5px; }

/* v0.219.0 — shelf descriptions + sales toggle safety */
.nox-shelf-desc { display: block; color: var(--nox-muted, #5B7286); font-size: 12px; margin-top: 2px; }
.nox-shelf-desc-lede { color: var(--nox-muted, #5B7286); margin: -6px 0 14px; }
.nox-sales-source-details { margin-top: 10px; }
.nox-sales-source-details summary { cursor: pointer; display: inline-block; }
.nox-sales-source-form { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin-top: 8px; }
.nox-btn-danger { background: #C43D3D !important; color: #fff; }

/* v0.221.0 — detailed attendance report */
.nox-detail-filters { display: flex; flex-direction: column; gap: 12px; }
.nox-detail-presets { display: flex; gap: 8px; }
.nox-chip { padding: 6px 14px; border-radius: 99px; background: #EDF2F7; color: var(--nox-ink, #0F2233); text-decoration: none; font-size: 13px; font-weight: 600; }
.nox-chip.is-on, .nox-chip:hover { background: var(--nox-pale, #E8F2FB); color: var(--nox-blue-ink, #1554A0); }
.nox-detail-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.nox-detail-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--nox-muted, #5B7286); }
.nox-detail-dayrow td { background: #F4F8FC; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--nox-blue-ink, #1554A0); }
.nox-badge-live { background: #E7F6EE; color: #1E9E5A; }

/* =====================================================================
   v0.222.0 — Feed: unread state, announcements, and a polish pass.
   Appended last so it wins at equal specificity. Literal colours used
   here get explicit dark overrides at the end of this block; everything
   else rides the theme custom properties and adapts on its own.
   ===================================================================== */

/* ---- Unread ---------------------------------------------------------- */

/* The divider is the one loud moment in the feed, so it earns the aurora
   hairline the login page uses: a rule that reads as a boundary, with the
   label sitting on the card surface rather than floating over the line. */
.nox-feed-newline {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 22px 0 14px;
	height: 1px;
	background: var(--nox-aurora);
}
.nox-feed-newline-txt {
	background: var(--nox-surface, #F4F7FB);
	color: var(--nox-blue-ink, #1554A0);
	font-family: var(--nox-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0 12px;
}

.nox-newpill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 99px;
	background: var(--nox-pale, #E8F2FB);
	color: var(--nox-blue-ink, #1554A0);
	font-size: 12.5px;
	font-weight: 700;
}
.nox-newpill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--nox-bright, #29ABE2);
	animation: nox-newpulse 2.4s ease-in-out infinite;
}
@keyframes nox-newpulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.35); opacity: 0.55; }
}

/* Nav badge — sized off the label row so it never shifts the icon. */
.nox-nav-badge {
	margin-left: auto;
	min-width: 19px;
	height: 19px;
	padding: 0 6px;
	border-radius: 99px;
	background: var(--nox-bright, #29ABE2);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	flex: 0 0 auto;
}

/* ---- Announcements --------------------------------------------------- */

/* An announcement is still a post — same card, same rhythm — lifted by a
   brand band across the top rather than a different shape, so the stream
   keeps one visual language. */
.nox-post-annc {
	border-color: color-mix(in srgb, var(--nox-blue, #1554A0) 32%, var(--nox-line, #E1E8EF));
	box-shadow: var(--nox-e2);
}
.nox-post-annc::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	border-radius: var(--nox-r-md, 14px) var(--nox-r-md, 14px) 0 0;
	background: var(--nox-aurora);
}
.nox-post-anncflag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	font-family: var(--nox-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nox-blue-ink, #1554A0);
}
.nox-annc-req {
	text-transform: none;
	letter-spacing: 0;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 99px;
	background: #FBF3DF;
	color: #8A6400;
}

/* Until you confirm, the card carries an amber edge; confirming resolves
   it to green. The colour is the state, so nobody has to read the bar to
   know whether they still owe something. */
.nox-post-annc.needs-ack { border-left: 3px solid #E0A72A; }

.nox-ackbar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 14px 0 4px;
	padding: 11px 14px;
	border-radius: 12px;
	background: #FDF8EC;
	border: 1px solid #F0E0BC;
}
.nox-ackbar.is-done {
	background: #EFF9F3;
	border-color: #CDE9DA;
}
.nox-ack-txt {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nox-ink, #0F2233);
	flex: 1 1 auto;
	min-width: 160px;
}
.nox-ackbar.is-done .nox-ack-txt { font-weight: 600; color: #1E7A4C; }
.nox-ack-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #1E9E5A;
	color: #fff;
	flex: 0 0 auto;
}
.nox-ack-form { margin: 0; }
.nox-ack-btn { white-space: nowrap; }
.nox-ack-report {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--nox-blue-ink, #1554A0);
	text-decoration: none;
	white-space: nowrap;
}
.nox-ack-report:hover { text-decoration: underline; }

/* Composer: the announcement chip and its options panel. */
.nox-annc-toggle.is-on {
	background: var(--nox-pale, #E8F2FB);
	border-color: var(--nox-blue, #1554A0);
	color: var(--nox-blue-ink, #1554A0);
}
.nox-annc-box {
	margin: 12px 0 0 52px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--nox-line, #E1E8EF);
	background: var(--nox-pale, #E8F2FB);
}
.nox-annc-box-head {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--nox-font-head);
	font-weight: 700;
	font-size: 13px;
	color: var(--nox-blue-ink, #1554A0);
}
.nox-annc-box-note {
	margin: 4px 0 10px;
	font-size: 12.5px;
	color: var(--nox-muted, #5B7286);
}
.nox-annc-ack {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
}
.nox-annc-ack input { margin-top: 3px; flex: 0 0 auto; }
.nox-annc-ack strong { display: block; font-size: 13px; color: var(--nox-ink, #0F2233); }
.nox-annc-ack em {
	display: block;
	font-style: normal;
	font-size: 12px;
	color: var(--nox-muted, #5B7286);
	margin-top: 1px;
}

/* ---- Receipt report -------------------------------------------------- */

.nox-ackreport-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nox-ackreport-excerpt {
	margin: 12px 0 0;
	padding-left: 12px;
	border-left: 3px solid var(--nox-line, #E1E8EF);
	color: var(--nox-ink, #0F2233);
}
.nox-ackreport-progress { margin-top: 16px; }
.nox-ackreport-bar {
	height: 10px;
	border-radius: 99px;
	background: #EDF2F7;
	overflow: hidden;
}
.nox-ackreport-bar span {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--nox-aurora);
	transition: width .4s ease;
}
.nox-ackreport-count {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: var(--nox-muted, #5B7286);
}
.nox-ackreport-count strong {
	font-family: var(--nox-font-head);
	font-size: 20px;
	color: var(--nox-ink, #0F2233);
	margin-right: 4px;
}
.nox-ackreport-pct { float: right; font-weight: 700; color: var(--nox-blue-ink, #1554A0); }
.nox-ackreport-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 16px;
}
.nox-ack-h-pending, .nox-ack-h-done { display: flex; align-items: center; gap: 8px; }
.nox-ack-n {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 99px;
	background: #EDF2F7;
	color: var(--nox-muted, #5B7286);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}
.nox-ack-h-pending .nox-ack-n { background: #FBF3DF; color: #8A6400; }
.nox-ack-h-done .nox-ack-n { background: #E7F6EE; color: #1E7A4C; }
.nox-acklist { list-style: none; margin: 10px 0 0; padding: 0; }
.nox-acklist li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 2px;
	border-top: 1px solid var(--nox-line, #E1E8EF);
}
.nox-acklist li:first-child { border-top: 0; }
.nox-ack-when { margin-left: auto; font-size: 12px; color: var(--nox-muted, #5B7286); white-space: nowrap; }

/* ---- Stream polish --------------------------------------------------- */

.nox-post { transition: box-shadow .18s ease, transform .18s ease; }
.nox-post:hover { box-shadow: var(--nox-e2); }
.nox-post-media img { border-radius: 10px; }
.nox-post-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nox-post-ccount {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nox-muted, #5B7286);
	margin-left: auto;
}
.nox-react-btn { transition: transform .14s ease, background-color .14s ease; }
.nox-react-btn:hover { transform: translateY(-1px); }
.nox-react-btn.is-mine { font-weight: 700; }

.nox-fc-more {
	display: inline-block;
	margin: 0 0 10px;
	padding: 5px 12px;
	border: 0;
	border-radius: 99px;
	background: var(--nox-pale, #E8F2FB);
	color: var(--nox-blue-ink, #1554A0);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.nox-fc-more:hover { background: #DCEBF9; }
.nox-fc-thread.is-folded { display: none; }
.nox-fc-replies { border-left: 2px solid var(--nox-line, #E1E8EF); padding-left: 10px; margin-left: 14px; }

@media (max-width: 760px) {
	.nox-ackreport-cols { grid-template-columns: 1fr; }
	.nox-annc-box { margin-left: 0; }
	.nox-ackbar { align-items: stretch; }
	.nox-ack-form, .nox-ack-btn { width: 100%; }
	.nox-post-ccount { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nox-newpill-dot { animation: none; }
	.nox-post, .nox-react-btn, .nox-ackreport-bar span { transition: none; }
}

/* ---- Dark skin for the literals introduced above --------------------- */

body[data-nox-theme="dark"] .nox-feed-newline-txt { background-color: var(--nox-surface); color: #8FC7F0; }
/* Brand navy is a chrome colour, not a text colour on dark surfaces: every
   place the light skin sets --nox-blue as type gets the lighter tint. */
body[data-nox-theme="dark"] .nox-newpill,
body[data-nox-theme="dark"] .nox-post-anncflag,
body[data-nox-theme="dark"] .nox-annc-box-head,
body[data-nox-theme="dark"] .nox-ackreport-pct,
body[data-nox-theme="dark"] .nox-annc-toggle.is-on,
body[data-nox-theme="dark"] .nox-ack-report { color: #8FC7F0; }
body[data-nox-theme="dark"] .nox-annc-toggle.is-on { border-color: #8FC7F0; }
body[data-nox-theme="dark"] .nox-annc-req { background-color: #3E351F; color: #E8C46A; }
body[data-nox-theme="dark"] .nox-ackbar { background-color: #2A2620; border-color: #443C29; }
body[data-nox-theme="dark"] .nox-ackbar.is-done { background-color: #1E2A24; border-color: #2C4237; }
body[data-nox-theme="dark"] .nox-ackbar.is-done .nox-ack-txt { color: #5FCB92; }
body[data-nox-theme="dark"] .nox-ackreport-bar { background-color: #2B303A; }
body[data-nox-theme="dark"] .nox-ack-n { background-color: #2B303A; color: var(--nox-muted); }
body[data-nox-theme="dark"] .nox-ack-h-pending .nox-ack-n { background-color: #3E351F; color: #E8C46A; }
body[data-nox-theme="dark"] .nox-ack-h-done .nox-ack-n { background-color: #1E2A24; color: #5FCB92; }
body[data-nox-theme="dark"] .nox-fc-more { background-color: var(--nox-pale); color: #8FC7F0; }
body[data-nox-theme="dark"] .nox-fc-more:hover { background-color: #303845; }
body[data-nox-theme="dark"] .nox-annc-box { background-color: var(--nox-pale); border-color: var(--nox-line); }

/* v0.222.1 — comment ⋯ menus opened into the wrong place.
   .nox-post-menu was given position:relative when it was written; the
   comment variant never was, so its absolutely-positioned popup anchored
   to the whole .nox-post card instead. Every comment menu landed in the
   same spot up in the post header — on top of the post's own menu — which
   looks exactly like "nothing happens" from the comment you clicked. */
.nox-comment-menu { position: relative; }
.nox-comment-menu > .nox-post-menu-pop { top: 28px; }
/* An open menu has to clear the comments stacked after it. */
.nox-post-menu[open], .nox-comment-menu[open] { z-index: 30; }
/* A reply's menu sits deep in the indent; keep the popup on-card. */
.nox-fc-replies .nox-comment-menu > .nox-post-menu-pop { right: 0; left: auto; }

/* =====================================================================
   v0.224.0 — Metric widgets that say what the number means: a delta
   chip against the previous window, and a target bar against the line
   the manager set. Both sit inside the existing metric card so the grid
   rhythm is untouched.
   ===================================================================== */

.nox-w-mtop { gap: 8px; flex-wrap: wrap; }

.nox-w-delta {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	border-radius: 99px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	cursor: default;
}
.nox-w-darrow { font-size: 9px; line-height: 1; }
/* Green and red track "is this the direction we wanted", not up and down:
   refunds falling is good news and reads green. */
.nox-w-delta.nox-d-good { background: #E7F6EE; color: #1E7A4C; }
.nox-w-delta.nox-d-bad  { background: #FBE9E9; color: #B4232A; }
/* --nox-muted on the grey chip lands at 4.44:1 — just under the line, so
   the flat variant gets its own slightly darker ink. */
.nox-w-delta.nox-d-flat { background: #EDF2F7; color: #55677A; }

.nox-w-target { margin-top: 10px; }
.nox-w-tbar {
	height: 5px;
	border-radius: 99px;
	background: #EDF2F7;
	overflow: hidden;
}
.nox-w-tbar span {
	display: block;
	height: 100%;
	border-radius: 99px;
	transition: width .35s ease;
}
.nox-w-tbar span.nox-tone-ok    { background: #1E9E5A; }
.nox-w-tbar span.nox-tone-warn  { background: #C08A00; }
.nox-w-tbar span.nox-tone-alert { background: #B4232A; }
.nox-w-tnote {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--nox-muted, #5B7286);
}

/* A one-column tile is tight; keep the value and its chip on one line and
   let the target note wrap underneath rather than squeezing the number. */
.nox-wspan-1 .nox-w-mval { font-size: 26px; }
.nox-wspan-1 .nox-w-delta { font-size: 11px; padding: 2px 6px; }
.nox-w-metric, .nox-w-mtop, .nox-w-mbottom { min-width: 0; }
.nox-w-mval { overflow-wrap: anywhere; }
.nox-w-tnote { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
	.nox-w-tbar span { transition: none; }
}

body[data-nox-theme="dark"] .nox-w-delta.nox-d-good { background-color: #1E2A24; color: #5FCB92; }
body[data-nox-theme="dark"] .nox-w-delta.nox-d-bad  { background-color: #2E1F20; color: #E98A8A; }
body[data-nox-theme="dark"] .nox-w-delta.nox-d-flat { background-color: #2B303A; color: var(--nox-muted); }
body[data-nox-theme="dark"] .nox-w-tbar { background-color: #2B303A; }

/* v0.225.0 — clock-out reminder card */
.nox-remind-lede { color: var(--nox-muted, #5B7286); margin: 0 0 14px; }
.nox-remind-card.is-unset { border-left: 3px solid #E0A72A; }
.nox-remind-form { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.nox-remind-fld { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--nox-muted, #5B7286); }
.nox-remind-fld input, .nox-remind-fld select {
	padding: 9px 12px; border: 1px solid var(--nox-fld-bd, #CBD6E2); border-radius: 10px;
	background: var(--nox-white, #fff); color: var(--nox-ink, #0F2233); font: inherit;
}
.nox-remind-fld input:focus, .nox-remind-fld select:focus { border-color: var(--nox-bright, #29ABE2); outline: none; }
.nox-remind-tz { margin: 12px 0 0; font-size: 12px; color: var(--nox-muted, #5B7286); }
.nox-remind-tz a { margin-left: 6px; }
@media (max-width: 760px) {
	.nox-remind-form { flex-direction: column; align-items: stretch; }
	.nox-remind-form .nox-btn { width: 100%; }
}
body[data-nox-theme="dark"] .nox-remind-fld input,
body[data-nox-theme="dark"] .nox-remind-fld select { background-color: var(--nox-card); border-color: var(--nox-fld-bd); }

/* v0.226.0 — KB authoring + visibility */
.nox-kbform-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.nox-kbform-lang {
	font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
	color: var(--nox-blue-ink, #1554A0); margin: 0 0 10px;
}
.nox-kbform-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.nox-kbform-meta .nox-field { max-width: 280px; }
.nox-field em { color: #B4232A; font-style: normal; }

.nox-kbvis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.nox-kbvis-head h2 { margin: 0 0 4px; }
.nox-kbvis-meta { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.nox-kbvis-kind, .nox-kbvis-draft, .nox-kbvis-rule {
	padding: 2px 9px; border-radius: 99px; font-weight: 600;
}
.nox-kbvis-kind { background: #EDF2F7; color: var(--nox-muted, #5B7286); }
.nox-kbvis-draft { background: #FBF3DF; color: #8A6400; }
.nox-kbvis-rule { background: var(--nox-pale, #E8F2FB); color: var(--nox-blue-ink, #1554A0); }
.nox-kbvis-links { display: flex; gap: 8px; }
.nox-kbvis-editor { margin-top: 12px; }
.nox-kbvis-editor > summary { cursor: pointer; font-size: 13px; color: var(--nox-blue-ink, #1554A0); font-weight: 600; }
.nox-kbvis-form { margin-top: 12px; }
.nox-kbvis-modes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.nox-kbvis-modes label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.nox-kbvis-people { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.nox-kbvis-person {
	display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px;
	border: 1px solid var(--nox-line, #E1E8EF); border-radius: 99px; cursor: pointer;
}
.nox-kbvis-person:hover { border-color: var(--nox-bright, #29ABE2); }
.nox-kbvis-hint { font-size: 12px; color: var(--nox-muted, #5B7286); margin: 0 0 10px; }
.nox-kb-edit { margin-left: auto; display: flex; align-items: center; gap: 10px; }

@media (max-width: 900px) {
	.nox-kbform-cols { grid-template-columns: 1fr; }
}
body[data-nox-theme="dark"] .nox-kbvis-kind { background-color: #2B303A; }
body[data-nox-theme="dark"] .nox-kbvis-draft { background-color: #3E351F; color: #E8C46A; }
body[data-nox-theme="dark"] .nox-kbvis-rule { background-color: var(--nox-pale); color: #8FC7F0; }
body[data-nox-theme="dark"] .nox-kbform-lang { color: #8FC7F0; }

/* v0.228.0 — bulk actions on the task list */
.nox-bulk-cell { width: 34px; text-align: center; }
.nox-table-bulk tbody tr:hover { background: var(--nox-pale, #E8F2FB); }
.nox-bulkbar {
	position: sticky; bottom: 12px; z-index: 20;
	display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
	margin-top: 14px; padding: 12px 16px;
	border: 1px solid var(--nox-line, #E1E8EF); border-radius: 14px;
	background: var(--nox-card, #fff); box-shadow: var(--nox-e2);
}
.nox-bulkbar-count { font-size: 13.5px; color: var(--nox-muted, #5B7286); }
.nox-bulkbar-count strong { font-family: var(--nox-font-head); font-size: 18px; color: var(--nox-ink, #0F2233); }
.nox-bulkbar-fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--nox-muted, #5B7286); }
.nox-bulkbar-fld select {
	padding: 7px 10px; border: 1px solid var(--nox-fld-bd, #CBD6E2);
	border-radius: 9px; background: var(--nox-white, #fff); color: var(--nox-ink, #0F2233); font: inherit;
}
.nox-bulkbar-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.nox-bulkbar-acts button[disabled] { opacity: .45; cursor: not-allowed; }
.nox-bulkbar-note { flex: 1 0 100%; margin: 4px 0 0; font-size: 11.5px; color: var(--nox-muted, #5B7286); }
@media (max-width: 760px) {
	.nox-bulkbar { flex-direction: column; align-items: stretch; }
	.nox-bulkbar-acts { margin-left: 0; }
	.nox-bulkbar-acts button { flex: 1 1 auto; }
}
body[data-nox-theme="dark"] .nox-bulkbar { background-color: var(--nox-card); }
body[data-nox-theme="dark"] .nox-bulkbar-fld select { background-color: var(--nox-card); border-color: var(--nox-fld-bd); }

/* v0.229.0 — pinned project widget */
.nox-pp { display: flex; flex-direction: column; gap: 12px; }
.nox-pp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nox-pp-name { font-family: var(--nox-font-head); font-weight: 700; font-size: 15px; color: var(--nox-ink, #0F2233); text-decoration: none; }
.nox-pp-name:hover { text-decoration: underline; }
.nox-pp-stats { font-size: 12px; color: var(--nox-muted, #5B7286); }
.nox-pp-sec h4 {
	margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--nox-muted, #5B7286);
}
.nox-pp-sec + .nox-pp-sec { border-top: 1px solid var(--nox-line, #E1E8EF); padding-top: 10px; }
.nox-pp-last { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 13px; }
.nox-pp-what { color: var(--nox-ink, #0F2233); }
.nox-pp-when { color: var(--nox-muted, #5B7286); font-size: 12px; margin-left: auto; white-space: nowrap; }
.nox-pp-posts { list-style: none; margin: 0; padding: 0; }
.nox-pp-posts li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.nox-pp-posts a { color: var(--nox-ink, #0F2233); text-decoration: none; }
.nox-pp-posts a:hover { text-decoration: underline; }

/* v0.231.0 — ticket reference and contact line */
.nox-cs-ref {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px; font-weight: 700; color: var(--nox-muted, #5B7286);
	background: #EDF2F7; border-radius: 6px; padding: 2px 7px; margin-right: 8px;
}
.nox-cs-contactline { margin: 4px 0 0; font-size: 13px; }
.nox-inline-search { display: flex; gap: 8px; }
.nox-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nox-inline-form input, .nox-inline-form select {
	padding: 8px 11px; border: 1px solid var(--nox-fld-bd, #CBD6E2);
	border-radius: 9px; background: var(--nox-white, #fff); color: var(--nox-ink, #0F2233); font: inherit;
}
body[data-nox-theme="dark"] .nox-cs-ref { background-color: #2B303A; }
body[data-nox-theme="dark"] .nox-inline-form input,
body[data-nox-theme="dark"] .nox-inline-form select { background-color: var(--nox-card); border-color: var(--nox-fld-bd); }

/* v0.232.0 — order context inside a CS ticket */
.nox-ordercard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nox-ordercard-head h2 { margin: 0; }
.nox-orderfacts { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0; }
.nox-orderfacts div { display: flex; flex-direction: column; gap: 2px; }
.nox-orderfacts span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--nox-muted, #5B7286); }
.nox-orderfacts strong { font-size: 14px; color: var(--nox-ink, #0F2233); }
.nox-orderlines { list-style: none; margin: 8px 0 0; padding: 0; }
.nox-orderlines li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px solid var(--nox-line, #E1E8EF); font-size: 13.5px; }
.nox-orderlines li:first-child { border-top: 0; }
.nox-ol-qty { font-weight: 700; color: var(--nox-muted, #5B7286); min-width: 30px; }
.nox-ol-amt { margin-left: auto; font-variant-numeric: tabular-nums; }
.nox-orderlive { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--nox-line, #E1E8EF); }
.nox-orderlive h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--nox-blue-ink, #1554A0); }
.nox-orderaddr { margin: 8px 0 0; font-size: 13.5px; color: var(--nox-ink, #0F2233); }
.nox-orderlive-note { margin: 10px 0 0; font-size: 11.5px; color: var(--nox-muted, #5B7286); }
body[data-nox-theme="dark"] .nox-orderlive h3 { color: #8FC7F0; }

/* v0.234.0 — the two names, shown plainly */
.nox-namecheck {
	display: flex; gap: 26px; flex-wrap: wrap;
	margin: 12px 0; padding: 10px 14px; border-radius: 12px;
	border: 1px solid var(--nox-line, #E1E8EF); background: var(--nox-pale, #E8F2FB);
}
.nox-namecheck div { display: flex; flex-direction: column; gap: 2px; }
.nox-namecheck span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--nox-muted, #5B7286); }
.nox-namecheck strong { font-size: 14px; color: var(--nox-ink, #0F2233); }
body[data-nox-theme="dark"] .nox-namecheck { background-color: var(--nox-pale); }

/* v0.237.0 — self-service password change */
.nox-pwform { max-width: 420px; }
.nox-pwform .nox-field { margin-bottom: 14px; }
.nox-pwform .nox-field em { font-style: normal; font-size: 11.5px; color: var(--nox-muted, #5B7286); margin-left: 6px; }
.nox-pwform input[type="password"], .nox-pwform input[type="text"] {
	width: 100%; padding: 10px 12px; border: 1px solid var(--nox-fld-bd, #CBD6E2);
	border-radius: 10px; background: var(--nox-white, #fff); color: var(--nox-ink, #0F2233); font: inherit;
}
.nox-pw-show { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nox-muted, #5B7286); margin-bottom: 10px; }
body[data-nox-theme="dark"] .nox-pwform input { background-color: var(--nox-card); border-color: var(--nox-fld-bd); }

/* =====================================================================
   v0.239.0 — dark-mode text that was left behind.
   
   The generated dark skin sits partway through this file; every layer
   appended after it only gets dark treatment where somebody wrote it by
   hand. These twenty-four rules set dark ink and never got theirs, so in
   dark mode they were dark text on a dark surface. tools/dark-verify.py
   now fails the build if another one appears.

   v0.353.0 — half of these had a dark rule all along, written as
   html[data-nox-theme="dark"]. body_attr() prints the attribute on
   <body>, so those never matched and this block was patching the
   symptom. The prefixes are fixed and dark-verify rejects the html form
   outright; the colours below still win on source order where the two
   overlap, which is why nothing moved when they were corrected.
   ===================================================================== */

body[data-nox-theme="dark"] .nox-import-summary .nox-chip,
body[data-nox-theme="dark"] .nox-blocked-summary .nox-chip { color: var(--nox-ink); }

body[data-nox-theme="dark"] .nox-import-summary .nox-chip-ok,
body[data-nox-theme="dark"] .nox-w-state-working .nox-w-worker-dur { color: #5FCB92; }

body[data-nox-theme="dark"] .nox-import-summary .nox-chip-err,
body[data-nox-theme="dark"] .nox-blocked-summary .nox-chip-err,
body[data-nox-theme="dark"] .nox-blocked-group-count,
body[data-nox-theme="dark"] .nox-blocked-table .nox-tone-alert,
body[data-nox-theme="dark"] .nox-order-fact-refund dd,
body[data-nox-theme="dark"] .nox-danger-card h2,
body[data-nox-theme="dark"] .nox-prod-state-cancelled,
body[data-nox-theme="dark"] .nox-prod-loss,
body[data-nox-theme="dark"] .nox-stock-neg,
body[data-nox-theme="dark"] .nox-sales-source-badge,
body[data-nox-theme="dark"] .nox-diff-chip.nox-diff-neg,
body[data-nox-theme="dark"] .nox-field em { color: #E98A8A; }

body[data-nox-theme="dark"] .nox-notice-warn,
body[data-nox-theme="dark"] .nox-prod-state-paused,
body[data-nox-theme="dark"] .nox-verify-off,
body[data-nox-theme="dark"] .nox-rs-pause,
body[data-nox-theme="dark"] .nox-loc-mismatch,
body[data-nox-theme="dark"] .nox-verify-phys-new,
body[data-nox-theme="dark"] .nox-diff-chip,
body[data-nox-theme="dark"] .nox-low-badge { color: #E8C46A; }

/* v0.239.0b — these carry their own tinted background, so lightening the
   text alone made them worse: light ink on a light chip. Flip both. */
body[data-nox-theme="dark"] .nox-low-badge,
body[data-nox-theme="dark"] .nox-diff-chip,
body[data-nox-theme="dark"] .nox-verify-off,
body[data-nox-theme="dark"] .nox-verify-phys-new,
body[data-nox-theme="dark"] .nox-rs-pause,
body[data-nox-theme="dark"] .nox-loc-mismatch,
body[data-nox-theme="dark"] .nox-prod-state-paused,
body[data-nox-theme="dark"] .nox-notice-warn { background-color: #3E351F; border-color: #56492A; }

body[data-nox-theme="dark"] .nox-sales-source-badge,
body[data-nox-theme="dark"] .nox-prod-state-cancelled,
body[data-nox-theme="dark"] .nox-prod-loss,
body[data-nox-theme="dark"] .nox-stock-neg,
body[data-nox-theme="dark"] .nox-diff-chip.nox-diff-neg,
body[data-nox-theme="dark"] .nox-blocked-group-count { background-color: #2E1F20; border-color: #4A2E2E; }

body[data-nox-theme="dark"] .nox-w-state-working .nox-w-worker-dur { background-color: #1E2A24; }

/* =====================================================================
   v0.240.0 — two more dark-mode misses, both the inverse of the last set:
   the surface stayed light, or the surface went dark and the text on it
   did not.
   ===================================================================== */

/* --nox-white is white in both themes. As a card surface it leaves the
   card white in dark mode; --nox-card is the one that follows the theme. */
body[data-nox-theme="dark"] .nox-health-cell {
	background-color: var(--nox-card);
	border: 1px solid var(--nox-line);
	box-shadow: none;
}
body[data-nox-theme="dark"] .nox-health-cell b { color: var(--nox-ink); }
body[data-nox-theme="dark"] .nox-dp,
body[data-nox-theme="dark"] .nox-dp-nav { background-color: var(--nox-card); }

/* The audience pill got a dark background but kept brand navy as its ink,
   which is navy on navy. */
body[data-nox-theme="dark"] .nox-kb-card-audience { color: #8FC7F0; }

/* v0.240.0b — tinted surfaces that stayed light in dark mode. Each keeps
   its meaning (green = good, red = problem) at dark-theme luminance. */
body[data-nox-theme="dark"] .nox-badge-live,
body[data-nox-theme="dark"] .nox-floor-card.nox-floor-close,
body[data-nox-theme="dark"] .nox-prod-src,
body[data-nox-theme="dark"] .nox-prod-state-completed,
body[data-nox-theme="dark"] .nox-verify-armed { background-color: #1E2A24; }

body[data-nox-theme="dark"] .nox-burger-bars span,
body[data-nox-theme="dark"] .nox-detail-dayrow td,
body[data-nox-theme="dark"] .nox-inv-searchhits a:hover,
body[data-nox-theme="dark"] .nox-prod-complete-form,
body[data-nox-theme="dark"] .nox-prod-kpi,
body[data-nox-theme="dark"] .nox-prod-state-in_progress { background-color: #22303F; }

body[data-nox-theme="dark"] .nox-import-table tr.nox-imp-error td { background-color: #2E1F20; }
body[data-nox-theme="dark"] .nox-sales-source-card.is-on { background-color: #2A2620; }

body[data-nox-theme="dark"] .nox-import-table tr.nox-imp-skip td,
body[data-nox-theme="dark"] .nox-inv-compbar,
body[data-nox-theme="dark"] .nox-prod-state-closed { background-color: #2B303A; }

/* v0.240.0c — darkening those surfaces left their ink too dark to read on
   them. Measured, not assumed: #1E9E5A on #1E2A24 is 4.3:1, just under. */
body[data-nox-theme="dark"] .nox-verify-armed,
body[data-nox-theme="dark"] .nox-prod-state-completed { color: #5FCB92; }
body[data-nox-theme="dark"] .nox-prod-state-in_progress { color: #8FC7F0; }
body[data-nox-theme="dark"] .nox-prod-state-closed { color: var(--nox-muted); }

/* v0.241.0 — the timeline dot is a literal white circle, so in dark mode it
   stayed white with light-grey text inside it. */
body[data-nox-theme="dark"] .nox-prod-step-dot { background: var(--nox-card); }
body[data-nox-theme="dark"] .nox-prod-step.is-current .nox-prod-step-dot { color: var(--nox-blue-ink); }
body[data-nox-theme="dark"] .nox-inv-search input[type="search"] { background: var(--nox-card); color: var(--nox-ink); }

/* v0.242.0 — desktop notifications opt-in card. The old version was a
   heading, a sentence and a button, and gave no way to tell whether the
   thing was actually working. It now states its own state plainly, and
   the diagnostics line is what turns "it doesn't notify me" into an
   answer. Theme-aware via the custom properties, per house rule. */
.nox-notify-optin { border-left: 3px solid var(--nox-line); }
.nox-notify-optin[data-state="on"] { border-left-color: var(--nox-bright); }
.nox-notify-optin[data-state="blocked"],
.nox-notify-optin[data-state="unsupported"] { border-left-color: #C9772A; }

.nox-notify-optin-text { min-width: 0; }
.nox-notify-optin-row h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nox-notify-optin-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nox-notify-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--nox-pale);
	color: var(--nox-muted);
	border: 1px solid var(--nox-line);
	vertical-align: middle;
}
.nox-notify-optin[data-state="on"] .nox-notify-pill {
	background: var(--nox-pale);
	color: var(--nox-blue);
	border-color: var(--nox-bright);
}
.nox-notify-optin[data-state="blocked"] .nox-notify-pill,
.nox-notify-optin[data-state="unsupported"] .nox-notify-pill {
	background: #FDF3E7;
	color: #8A4E10;
	border-color: #E8C89E;
}

.nox-notify-diag {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--nox-muted);
	font-variant-numeric: tabular-nums;
}
.nox-notify-diag:empty { display: none; }

/* Solid colours on purpose: a translucent chip over an unknown card colour
   is a contrast figure nobody can check, and this one failed AA when it was
   measured. */
body[data-nox-theme="dark"] .nox-notify-optin[data-state="blocked"] .nox-notify-pill,
body[data-nox-theme="dark"] .nox-notify-optin[data-state="unsupported"] .nox-notify-pill {
	background-color: #3A2814;
	color: #E8B579;
	border-color: #7A5322;
}
/* The "on" pill inherits --nox-pale, which is a dark navy in this theme, and
   --nox-blue text on it is unreadable. Same light-blue-on-pale pairing the
   rest of the dark theme already uses. */
body[data-nox-theme="dark"] .nox-notify-optin[data-state="on"] .nox-notify-pill {
	background-color: var(--nox-pale);
	color: #8FC7F0;
	border-color: var(--nox-bright);
}

@media ( max-width: 640px ) {
	.nox-notify-optin-actions { width: 100%; }
	.nox-notify-optin-actions .nox-btn { flex: 1 1 auto; }
}

/* v0.245.0 — small-button variants were white slabs in dark mode.
   Reported on the calendar's "Jump" button; the same fault hit
   .nox-btn-quiet and .nox-menu-danger, which nobody had noticed only
   because of which screen they happened to be on.

   Cause: the v0.74.1 and v0.114.0 fixes settled a light-mode collision
   with `background: var(--nox-white) !important`. --nox-white is #FFFFFF
   in both themes on purpose, and the later dark overrides were written
   without !important, so they never stood a chance. The surfaces now use
   --nox-card, which is #FFFFFF in light and #1E222B in dark.

   The danger variant also hard-codes a light-theme red for its ink,
   border and hover. Those need !important of their own to answer the
   !important above them. */
body[data-nox-theme="dark"] .nox-btn-small.nox-menu-danger {
	color: #F2938D !important;
	border-color: #7A2E2E !important;
}
body[data-nox-theme="dark"] .nox-btn-small.nox-menu-danger:hover {
	background: #3A2124 !important;
	border-color: #B4232A !important;
	color: #FFB3AD !important;
}

/* ------------------------------------------------------------------
 * Movement history (v0.250.0) — appended last so it wins by cascade
 * order, per the house convention. Colours come from the custom
 * properties, so dark mode follows without a second ruleset.
 * ------------------------------------------------------------------ */
.nox-move-filter input[type="date"] { min-width: 140px; }
.nox-move-filter select { min-width: 150px; }

.nox-moves-table td { vertical-align: top; }
.nox-moves-table td .nox-field-hint { display: block; margin-top: 2px; }
.nox-moves-table .nox-move-badge { display: inline-block; min-width: 40px; text-align: center; }

.nox-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--nox-line);
}
.nox-pager-at { color: var(--nox-muted); font-size: 13px; }

@media (max-width: 720px) {
	.nox-move-filter input[type="date"], .nox-move-filter select { width: 100%; min-width: 0; }
	.nox-moves-table thead { display: none; }
	.nox-moves-table tr { display: block; border-top: 1px solid var(--nox-line); padding: 8px 0; }
	.nox-moves-table td { display: block; text-align: left !important; padding: 2px 0; }
}

/* Bulk stock verification (v0.251.0) */
.nox-verify-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 0;
}
.nox-verify-bar-end {
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--nox-line);
}
.nox-verify-count { text-align: right; }

@media (max-width: 720px) {
	.nox-verify-bar { flex-direction: column; align-items: stretch; }
	.nox-verify-bar .nox-btn { width: 100%; }
}

/* Event visibility picker (v0.253.0) */
.nox-vis-picker { display: grid; gap: 8px; margin-bottom: 14px; }
.nox-vis-opt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--nox-line);
	border-radius: 10px;
	cursor: pointer;
}
.nox-vis-opt:hover { border-color: var(--nox-bright, #29ABE2); }
.nox-vis-opt input { margin-top: 3px; flex: 0 0 auto; }
.nox-vis-opt span { display: block; }
.nox-vis-opt strong { display: block; font-size: 14px; }
.nox-vis-opt small { display: block; color: var(--nox-muted); font-size: 12px; margin-top: 2px; }
.nox-vis-opt:has(input:checked) {
	border-color: var(--nox-blue, #1554A0);
	background: var(--nox-pale, #E8F2FB);
}
body[data-nox-theme="dark"] .nox-vis-opt:has(input:checked) { background: rgba( 41, 171, 226, 0.12 ); }

/* ===================================================================
 * Dark-mode calendar legibility (v0.254.0)
 *
 * Event chips take their hue from an inline --nox-ev set per event type.
 * The light-mode rule builds the text as that hue mixed 85% with BLACK,
 * which on a dark cell landed at 1.6–3.3:1 contrast — dark ink on a dark
 * card. Only the background had a dark override, so the text never got
 * corrected. Here the whole triplet (background, border, text) is rebuilt
 * from the same hue for a dark surface: measured 6.6–7.4:1 across all
 * seven event types, so the colour still identifies the type and the
 * words are actually readable.
 * ================================================================ */
body[data-nox-theme="dark"] .nox-cal-ev,
body[data-nox-theme="dark"] .nox-cal-chip.nox-cal-ev {
	background: color-mix(in srgb, var(--nox-ev, #29ABE2) 20%, #1B2029);
	border-color: color-mix(in srgb, var(--nox-ev, #29ABE2) 42%, transparent);
	color: color-mix(in srgb, var(--nox-ev, #29ABE2) 45%, #FFFFFF);
}
body[data-nox-theme="dark"] .nox-cal-ev .nox-ev-ico {
	color: color-mix(in srgb, var(--nox-ev, #29ABE2) 55%, #FFFFFF);
}
/* Hover darkened the chip, which on a dark theme reads as "disabled". */
body[data-nox-theme="dark"] .nox-cal-ev:hover { filter: brightness(1.22); }

/* Past days fade the chip instead of recolouring it into the background. */
body[data-nox-theme="dark"] .nox-cal-cell.is-past .nox-cal-ev { opacity: 0.55; }

/* Fixed-hue chips whose dark rule set a background but kept light-mode ink. */
body[data-nox-theme="dark"] .nox-cal-chip-event { color: #C7B4EE; }
body[data-nox-theme="dark"] .nox-cal-chip-event .nox-ev-ico { color: #C7B4EE; }

/* The legend uses the same hue and had the same problem. */
body[data-nox-theme="dark"] .nox-cal-legend .nox-legend-item {
	color: color-mix(in srgb, var(--nox-ev, #29ABE2) 45%, #FFFFFF);
}
body[data-nox-theme="dark"] .nox-cal-legend .nox-legend-item .nox-ev-ico {
	color: color-mix(in srgb, var(--nox-ev, #29ABE2) 55%, #FFFFFF);
}

/* Week view items carry the same chips on a slightly lighter column. */
body[data-nox-theme="dark"] .nox-cal-wkitem .nox-cal-ev {
	background: color-mix(in srgb, var(--nox-ev, #29ABE2) 22%, #1B2029);
}

/* Event creator line (v0.255.0) */
.nox-ev-pop-by { margin: 4px 0 0; font-size: 12px; color: var(--nox-muted); }
.nox-ev-createdby { margin: 0 0 12px; }

/* ===================================================================
 * Overtime (v0.256.0)
 * ================================================================ */
.nox-ot-hm { display: inline-flex; align-items: center; gap: 6px; }
.nox-ot-hm input { width: 70px; text-align: right; }

.nox-ot-form { display: grid; gap: 6px; max-width: 560px; }
.nox-ot-form label { font-weight: 600; font-size: 13px; margin-top: 6px; }
.nox-ot-form button { margin-top: 12px; justify-self: start; }

.nox-ot-askrow,
.nox-ot-review {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 12px; padding: 12px 0; border-top: 1px solid var(--nox-line);
}
.nox-ot-review { display: block; }
.nox-ot-review-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nox-ot-figures { margin: 4px 0; font-size: 13px; }
.nox-ot-reason { margin: 2px 0 6px; font-size: 13px; color: var(--nox-muted); }
.nox-ot-src {
	font-size: 11px; padding: 2px 8px; border-radius: 999px;
	background: var(--nox-pale); color: var(--nox-blue);
}
.nox-ot-answer, .nox-ot-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nox-ot-decide label { font-weight: 600; font-size: 13px; }

.nox-ot-status { font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.nox-ot-pending   { background: #FBF3E2; color: #6B4E00; }
.nox-ot-approved  { background: #E7F5EC; color: #1E7A48; }
.nox-ot-rejected  { background: #FBE5DC; color: #B44819; }
.nox-ot-cancelled { background: #EDF2F7; color: #43596C; }

.nox-ot-badge {
	display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
	padding: 1px 6px; border-radius: 999px; background: #E7F5EC; color: #1E7A48;
}
.nox-att-otrow th, .nox-att-otrow td { color: var(--nox-muted); font-weight: 600; }

.nox-ot-toast {
	position: fixed; z-index: 320; right: 20px; bottom: 20px;
	background: var(--nox-navy, #0A1F3C); color: #fff;
	padding: 11px 16px; border-radius: 10px; font-size: 13px;
	box-shadow: 0 10px 28px rgba(10, 31, 60, 0.28);
}

body[data-nox-theme="dark"] .nox-ot-pending   { background-color: #4B3916; color: #E8CA92; }
body[data-nox-theme="dark"] .nox-ot-approved  { background-color: #1C442B; color: #95E5B9; }
body[data-nox-theme="dark"] .nox-ot-rejected  { background-color: #4B2516; color: #E8AC92; }
body[data-nox-theme="dark"] .nox-ot-cancelled { background-color: #1E3043; color: #A1BFD9; }
body[data-nox-theme="dark"] .nox-ot-badge     { background-color: #1C442B; color: #95E5B9; }
body[data-nox-theme="dark"] .nox-ot-src       { background-color: #16324B; color: #97BFE2; }

@media (max-width: 720px) {
	.nox-ot-answer, .nox-ot-decide { width: 100%; }
}

/* Overtime prompt (v0.265.0) — rides on the confirm-modal chrome, so it
 * only needs the styling of the fields the confirm dialog never has. */
.nox-ot-card .nox-ot-label {
	display: block; margin-top: 10px; margin-bottom: 3px;
	font-size: 12.5px; font-weight: 600; color: var(--nox-ink);
}
.nox-ot-card textarea {
	width: 100%; box-sizing: border-box; resize: vertical;
	font-family: inherit; font-size: 13.5px; padding: 8px 10px;
	border: 1px solid var(--nox-line); border-radius: 8px;
	background: var(--nox-card, #fff); color: var(--nox-ink);
}
.nox-ot-card .nox-ot-count {
	display: block; text-align: right; font-size: 11px;
	color: var(--nox-muted); margin-top: 2px;
}
.nox-ot-card .nox-ot-min { width: 96px; text-align: right; }
.nox-ot-card .nox-ot-note {
	margin: 10px 0 18px; font-size: 12px; color: var(--nox-muted); line-height: 1.5;
}
.nox-ot-card .nox-confirm-actions { margin-top: 4px; }

/* Clock-out reminder — saved state and edit disclosure (v0.258.0) */
.nox-remind-current { margin: 0 0 4px; font-size: 14px; }
.nox-remind-now {
	display: inline-block; font-weight: 700; font-size: 17px;
	padding: 1px 9px; margin-right: 4px; border-radius: 8px;
	background: var(--nox-pale); color: var(--nox-blue);
	font-variant-numeric: tabular-nums;
}
.nox-remind-edit { margin-top: 8px; }
.nox-remind-edit > summary.nox-remind-editbtn {
	display: inline-block; cursor: pointer; list-style: none;
	padding: 5px 12px; border-radius: 8px;
}
.nox-remind-edit > summary::-webkit-details-marker { display: none; }
.nox-remind-edit[open] > summary.nox-remind-editbtn { margin-bottom: 10px; }
.nox-remind-24h { margin-top: 6px; }
body[data-nox-theme="dark"] .nox-remind-now { background-color: #16324B; color: #97BFE2; }

/* ===================================================================
 * Leaderboards (v0.266.0)
 *
 * Podium for the top three, ranked rows underneath. The score bar sits as
 * a thin rail under the name rather than a full-height wash: at the range
 * these numbers live in (85-100%) a filled block made every row look the
 * same, which is the opposite of what a ranking is for.
 * ================================================================ */
.nox-lb-boards { display: flex; flex-wrap: wrap; margin: 14px 0; }

.nox-lb-head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.nox-lb-head h2 { margin: 0 0 3px; }
.nox-lb-period {
	margin: 6px 0 0; font-size: 12px; color: var(--nox-muted);
	font-variant-numeric: tabular-nums;
}

/* ---- Period filter --------------------------------------------- */
.nox-lb-ranges { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.nox-lb-ranges .nox-chip {
	display: inline-flex; align-items: center; justify-content: center;
	box-sizing: border-box; height: 30px; padding: 0 14px;
	border-radius: 999px; border: 1px solid var(--nox-line);
	font-size: 12.5px; line-height: 1;
	color: var(--nox-muted); text-decoration: none; white-space: nowrap;
	background: var(--nox-card, #fff); cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nox-lb-ranges .nox-chip:hover { border-color: var(--nox-bright, #29ABE2); color: var(--nox-ink); }
.nox-lb-ranges .nox-chip.is-active {
	background: var(--nox-blue, #1554A0); border-color: var(--nox-blue, #1554A0);
	color: #fff; font-weight: 600;
}
.nox-lb-custom { position: relative; }
.nox-lb-custom > summary { list-style: none; }
.nox-lb-custom > summary::-webkit-details-marker { display: none; }
.nox-lb-daterange {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 12px 14px; width: max-content; max-width: 92vw;
	background: var(--nox-card, #fff); border: 1px solid var(--nox-line);
	border-radius: 12px; box-shadow: 0 14px 34px rgba(10, 31, 60, .18);
}
.nox-lb-daterange label { font-size: 12px; font-weight: 600; color: var(--nox-muted); }
.nox-lb-daterange input[type="date"] { font-size: 13px; }

/* ---- Podium ---------------------------------------------------- */
.nox-lb-podium {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 16px; align-items: end; margin-bottom: 24px;
}
.nox-lb-podium > :nth-child(1) { order: 2; }
.nox-lb-podium > :nth-child(2) { order: 1; }
.nox-lb-podium > :nth-child(3) { order: 3; }

.nox-lb-pod {
	position: relative; text-align: center;
	padding: 26px 14px 18px; border-radius: 16px;
	border: 1px solid var(--nox-line); background: var(--nox-card, #fff);
}
/* One tinted wash per place, so the ranking reads before the numbers do. */
.nox-lb-pod.is-rank-1 {
	padding-top: 34px; padding-bottom: 26px;
	border-color: rgba(199, 154, 25, .55);
	background: linear-gradient(180deg, rgba(199, 154, 25, .10), transparent 62%), var(--nox-card, #fff);
	box-shadow: 0 12px 30px rgba(199, 154, 25, .16);
}
.nox-lb-pod.is-rank-2 {
	border-color: rgba(139, 152, 165, .55);
	background: linear-gradient(180deg, rgba(139, 152, 165, .12), transparent 62%), var(--nox-card, #fff);
}
.nox-lb-pod.is-rank-3 {
	border-color: rgba(169, 113, 60, .55);
	background: linear-gradient(180deg, rgba(169, 113, 60, .10), transparent 62%), var(--nox-card, #fff);
}

.nox-lb-medal {
	position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; line-height: 1; border-radius: 999px;
	font-size: 13px; font-weight: 700; color: #fff;
	background: var(--nox-muted); box-shadow: 0 3px 8px rgba(10, 31, 60, .28);
	border: 2px solid var(--nox-card, #fff);
}
.nox-lb-pod.is-rank-1 .nox-lb-medal { background: #C79A19; }
.nox-lb-pod.is-rank-2 .nox-lb-medal { background: #8B98A5; }
.nox-lb-pod.is-rank-3 .nox-lb-medal { background: #A9713C; }

.nox-lb-pod .nox-ava {
	margin: 0 auto 10px; display: block;
	box-shadow: 0 0 0 3px var(--nox-card, #fff), 0 0 0 5px var(--nox-line);
}
.nox-lb-pod.is-rank-1 .nox-ava { box-shadow: 0 0 0 3px var(--nox-card, #fff), 0 0 0 5px #C79A19; }
.nox-lb-pod.is-rank-2 .nox-ava { box-shadow: 0 0 0 3px var(--nox-card, #fff), 0 0 0 5px #8B98A5; }
.nox-lb-pod.is-rank-3 .nox-ava { box-shadow: 0 0 0 3px var(--nox-card, #fff), 0 0 0 5px #A9713C; }

.nox-lb-podname {
	display: block; font-weight: 600; font-size: 13.5px; color: var(--nox-ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nox-lb-podscore {
	display: block; margin-top: 6px; font-weight: 700; line-height: 1;
	font-size: 26px; color: var(--nox-blue, #1554A0);
	font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.nox-lb-pod.is-rank-1 .nox-lb-podscore { font-size: 33px; }
.nox-lb-podscore small { font-size: .5em; margin-left: 2px; font-weight: 600; opacity: .75; }
.nox-lb-poddetail {
	display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: var(--nox-muted);
}

/* ---- Ranked list ------------------------------------------------ */
.nox-lb-list { list-style: none; margin: 0; padding: 0; }
.nox-lb-row {
	display: flex; align-items: center; gap: 14px;
	padding: 12px 16px; margin-bottom: 8px; border-radius: 12px;
	border: 1px solid var(--nox-line); background: var(--nox-card, #fff);
	transition: border-color .15s ease;
}
.nox-lb-row:hover { border-color: var(--nox-bright, #29ABE2); }
.nox-lb-rank {
	flex: 0 0 28px; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; line-height: 1;
	border-radius: 999px; background: var(--nox-pale, #E8F2FB);
	font-weight: 700; font-size: 13px; color: var(--nox-blue, #1554A0);
	font-variant-numeric: tabular-nums;
}
.nox-lb-who { flex: 1 1 auto; min-width: 0; }
.nox-lb-detail { display: block; font-size: 12px; color: var(--nox-muted); margin-top: 2px; }
.nox-lb-track {
	display: block; height: 4px; margin-top: 8px; max-width: 420px;
	border-radius: 999px; background: var(--nox-line);
	overflow: hidden;
}
.nox-lb-bar {
	display: block; height: 100%; border-radius: 999px;
	background: linear-gradient(90deg, var(--nox-blue, #1554A0), var(--nox-bright, #29ABE2));
}
.nox-lb-score {
	flex: 0 0 auto; font-weight: 700; font-size: 19px;
	color: var(--nox-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.nox-lb-score small { font-size: .62em; margin-left: 1px; opacity: .7; }

/* Your own row and card, so you find yourself without reading every name. */
.nox-lb-row.is-me { border-color: var(--nox-bright, #29ABE2); background: var(--nox-pale, #E8F2FB); }
.nox-lb-pod.is-me { outline: 2px solid var(--nox-bright, #29ABE2); outline-offset: -2px; }

body[data-nox-theme="dark"] .nox-lb-row { background-color: rgba(255, 255, 255, .03); }
body[data-nox-theme="dark"] .nox-lb-row.is-me { background-color: rgba(41, 171, 226, .10); }
body[data-nox-theme="dark"] .nox-lb-rank { background-color: rgba(41, 171, 226, .14); color: #8FC7F0; }
body[data-nox-theme="dark"] .nox-lb-podscore { color: #8FC7F0; }
body[data-nox-theme="dark"] .nox-lb-track { background-color: rgba(255, 255, 255, .10); }
body[data-nox-theme="dark"] .nox-lb-pod.is-rank-1 { box-shadow: 0 12px 30px rgba(0, 0, 0, .40); }

@media (max-width: 720px) {
	/* The 2-1-3 arrangement needs width to read; stacked, rank order wins. */
	.nox-lb-podium { grid-template-columns: 1fr; gap: 12px; }
	.nox-lb-podium > :nth-child(n) { order: 0; }
	.nox-lb-pod, .nox-lb-pod.is-rank-1 { padding: 24px 14px 16px; }
	.nox-lb-pod.is-rank-1 .nox-lb-podscore { font-size: 26px; }
	.nox-lb-head { flex-direction: column; }
	.nox-lb-daterange { position: static; width: auto; box-shadow: none; }
	.nox-lb-row { gap: 10px; padding: 11px 12px; }
	.nox-lb-score { font-size: 16px; }
	.nox-lb-track { max-width: none; }
}

/* Leaderboard empty-state explainer (v0.263.0) */
.nox-lb-why { margin-top: 10px; font-size: 13px; }

/* ===================================================================
 * Consumables (v0.270.0)
 * ================================================================ */
.nox-cons-form { display: block; max-width: 780px; }
.nox-cons-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px; margin-bottom: 14px;
}
.nox-cons-grid label, .nox-cons-full { display: block; }
.nox-cons-grid label > span, .nox-cons-full > span {
	display: block; font-size: 12.5px; font-weight: 600;
	color: var(--nox-muted); margin-bottom: 4px;
}
.nox-cons-grid input, .nox-cons-grid select, .nox-cons-full input { width: 100%; box-sizing: border-box; }
.nox-cons-full { max-width: 520px; margin-bottom: 12px; }

.nox-cons-mode {
	border: 1px solid var(--nox-line); border-radius: 12px;
	padding: 14px 16px; margin: 0 0 14px;
}
.nox-cons-mode legend { font-size: 12.5px; font-weight: 700; padding: 0 6px; color: var(--nox-ink); }
.nox-cons-mode .nox-vis-opt { margin-bottom: 8px; }

.nox-cons-check { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.nox-cons-check span { font-size: 13.5px; }

.nox-cons-actions { display: grid; gap: 10px; }
.nox-cons-action { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nox-cons-action input[type="number"] { width: 130px; }
.nox-cons-action input[type="text"] { flex: 1 1 200px; min-width: 160px; }

.nox-cons-table .nox-cons-num strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.nox-cons-table .nox-cons-num .nox-field-hint { margin-left: 4px; }
.nox-cons-table .nox-field-hint { display: block; }
.nox-cons-low td { background: #FBF3E2; }
body[data-nox-theme="dark"] .nox-cons-low td { background-color: #3E351F; }

@media (max-width: 720px) {
	.nox-cons-action { width: 100%; }
	.nox-cons-action input[type="number"] { width: 100%; }
}

/* Verification: locations outside the sales storage (v0.271.0) */
.nox-verify-other::before { content: '⌂ '; opacity: .6; }
.nox-verify-other { color: var(--nox-muted); }

/* Verification: one count field per location (v0.273.0) */
.nox-verify-count { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nox-verify-count-in { width: 92px; text-align: right; }
.nox-verify-count-lbl { font-size: 12px; color: var(--nox-muted); }
.nox-verify-note { width: 100%; max-width: 320px; margin-top: 4px; }

/* Verification: confirm-as-is checkbox (v0.274.0) */
.nox-verify-ok {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
	padding: 3px 9px 3px 6px; border: 1px solid var(--nox-line); border-radius: 999px;
	background: var(--nox-card, #fff);
}
.nox-verify-ok:hover { border-color: var(--nox-bright, #29ABE2); }
.nox-verify-ok-qty { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nox-verify-ok:has(input:checked) {
	border-color: #1E7A48; background: #E7F5EC; color: #14683C;
}
body[data-nox-theme="dark"] .nox-verify-ok:has(input:checked) {
	background-color: #1C442B; border-color: #337A51; color: #95E5B9;
}
/* Typing a number is the stronger statement, so it dims the tick. */
.nox-verify-count:has(.nox-verify-count-in:not(:placeholder-shown)) .nox-verify-ok { opacity: .45; }

/* Consumables: where it is kept (v0.275.0) */
.nox-cons-where { margin: 4px 0 2px; font-size: 13.5px; }
.nox-cons-where .nox-diff-chip { margin-left: 8px; }

/* Expense reports (v0.276.0) */
.nox-exp-draft     { background: #EDF2F7; color: #43596C; }
.nox-exp-submitted { background: #FBF3E2; color: #6B4E00; }
.nox-exp-approved  { background: #E7F5EC; color: #1E7A48; }
.nox-exp-rejected  { background: #FBE5DC; color: #B44819; }
.nox-exp-paid      { background: #E8F2FB; color: #1554A0; }
.nox-exp-line {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--nox-line);
}
.nox-exp-line input[type="number"] { width: 120px; text-align: right; }
.nox-exp-line input[type="text"] { flex: 1 1 180px; min-width: 150px; }
body[data-nox-theme="dark"] .nox-exp-draft     { background-color: #1E3043; color: #A1BFD9; }
body[data-nox-theme="dark"] .nox-exp-submitted { background-color: #4B3916; color: #E8CA92; }
body[data-nox-theme="dark"] .nox-exp-approved  { background-color: #1C442B; color: #95E5B9; }
body[data-nox-theme="dark"] .nox-exp-rejected  { background-color: #4B2516; color: #E8AC92; }
body[data-nox-theme="dark"] .nox-exp-paid      { background-color: #16324B; color: #97BFE2; }
@media (max-width: 720px) { .nox-exp-line > * { width: 100%; } }
.nox-exp-requested { background: #E8F2FB; color: #1554A0; }
body[data-nox-theme="dark"] .nox-exp-requested { background-color: #16324B; color: #97BFE2; }

/* The expenses callout only exists while something is owed (v0.278.0) */
.nox-exp-callout { border-left: 4px solid var(--nox-bright, #29ABE2); margin-bottom: 18px; }
.nox-exp-callout h2 { margin-top: 0; }
.nox-exp-callout .nox-ot-askrow:first-of-type { border-top: 0; padding-top: 4px; }

/* =====================================================================
   Item catalog (v0.280.0) — definitions above shelves.
   Every colour here is a theme variable or has its dark twin written
   immediately below it: this layer sits after the generated dark skin,
   so an unpaired literal would be dark ink on a dark surface.
   ================================================================== */

.nox-def-group + .nox-def-group { margin-top: 16px; }
.nox-def-cat {
	margin: 0 0 10px; font: 700 13px/1.4 'Montserrat', sans-serif;
	letter-spacing: .04em; text-transform: uppercase;
}

.nox-def-list { list-style: none; margin: 0; padding: 0; }
.nox-def-row {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 0; border-top: 1px solid var(--nox-line);
}
.nox-def-list .nox-def-row:first-child { border-top: 0; }
.nox-def-row.is-inactive { opacity: .55; }

.nox-def-main { flex: 1 1 auto; min-width: 0; }
.nox-def-name {
	display: block; font-weight: 600; font-size: 14.5px;
	color: var(--nox-ink); overflow-wrap: anywhere;
}
.nox-def-meta { display: block; font-size: 12.5px; color: var(--nox-muted); margin-top: 2px; }

.nox-def-qty {
	flex: 0 0 auto; font-weight: 700; font-size: 15px;
	font-variant-numeric: tabular-nums; color: var(--nox-ink); text-align: right;
}
.nox-def-unit { display: block; font-weight: 400; font-size: 11.5px; color: var(--nox-muted); }

/* The link block on an item page: what it is, and how to change that. */
.nox-def-link {
	margin: 0 0 16px; padding: 12px 14px;
	background: var(--nox-pale); border-radius: 10px;
}
body[data-nox-theme="dark"] .nox-def-link { background-color: #16324B; }
.nox-def-link-now { margin: 0; font-size: 14px; color: var(--nox-ink); }
.nox-def-link-now .nox-muted { margin-left: 8px; font-size: 12.5px; }
.nox-def-link-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nox-def-link-form select { flex: 1 1 240px; min-width: 0; }
.nox-def-link .nox-form-hint { margin-bottom: 0; }

/* The SKU tag picker on the definition form. */
.nox-def-skus {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px; max-height: 320px; overflow-y: auto;
	padding: 12px; border: 1px solid var(--nox-line); border-radius: 10px;
}
.nox-def-sku-fam h4 {
	margin: 0 0 6px; font: 700 11.5px/1.4 'Montserrat', sans-serif;
	letter-spacing: .04em; text-transform: uppercase; color: var(--nox-muted);
}
.nox-def-skus .nox-def-sku-opt {
	display: flex; align-items: flex-start; gap: 8px;
	margin: 4px 0; font-size: 13.5px; line-height: 1.45; color: var(--nox-ink);
	font-weight: 400;
}
.nox-def-skus .nox-def-sku-opt input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }

.nox-chip-quiet {
	margin-left: 6px; padding: 1px 8px; border-radius: 999px;
	font: 600 11px/1.6 'Open Sans', sans-serif;
	background: var(--nox-line); color: var(--nox-muted);
}
body[data-nox-theme="dark"] .nox-chip-quiet { background-color: #22354A; }

.nox-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;
}

@media (max-width: 620px) {
	.nox-def-row { flex-wrap: wrap; }
	/* Keep the thumbnail and the name on one line; the count and the edit
	   link drop below in reading order rather than being reshuffled. */
	.nox-def-main { flex: 1 1 140px; }
	.nox-def-qty { margin-left: auto; text-align: left; }
}

/* Desktop-only punching (v0.291.0): the explanation that replaces the
   punch-in button on a phone. Amber rather than red — it is a rule, not
   a failure, and the person has done nothing wrong. */
.nox-att-blocked {
	margin: 0; padding: 14px 16px; border-radius: 12px;
	background: #FFF6E0; border: 1px solid #F0DCA8;
	color: var(--nox-ink); font-weight: 600; font-size: 14.5px; line-height: 1.5;
}
body[data-nox-theme="dark"] .nox-att-blocked { background-color: #3A3115; border-color: #55471F; }
.nox-att-blocked span {
	display: block; margin-top: 4px;
	font-weight: 400; font-size: 13.5px; color: var(--nox-muted);
}

/* Manager close-day control (v0.292.0) — the escape hatch for the
   desktop-only rule. Quiet by design: it writes to someone else's
   timesheet, so it should not look like a primary action. */
.nox-att-forceout {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	margin-left: auto; padding-left: 10px;
}
.nox-att-forceout input[type="datetime-local"] {
	width: auto; padding: 5px 8px; font-size: 12.5px;
	border: 1px solid var(--nox-line); border-radius: 8px;
	background: var(--nox-card); color: var(--nox-ink);
}
@media (max-width: 640px) {
	.nox-att-forceout { margin-left: 0; padding-left: 0; width: 100%; }
	.nox-att-forceout input[type="datetime-local"] { flex: 1 1 auto; }
}

/* Partner payments received (v0.293.0). Amounts are read down a column and
   compared, so they get tabular figures; the note rides under its reference
   rather than taking a column of its own. */
.nox-ptn-table .nox-ptn-num,
.nox-ptn-table th.nox-ptn-num {
	text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nox-ptn-paynote { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; }
.nox-ptn-table tfoot th {
	border-top: 2px solid var(--nox-line);
	font-weight: 700; color: var(--nox-ink);
}
.nox-ptn-table td:nth-child(3),
.nox-ptn-table td:nth-child(4) { white-space: nowrap; }

/* "See all" row under a paged list (v0.295.0). Count and control on one
   line, so the reader sees how much is hidden before deciding. */
.nox-ptn-morerow {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 10px;
	margin: 12px 0 0; padding-top: 12px;
	border-top: 1px solid var(--nox-line);
	font-size: 13px;
}
.nox-ptn-count {
	margin-left: 8px; padding: 1px 9px; border-radius: 999px;
	background: var(--nox-line); color: var(--nox-muted);
	font: 600 12px/1.7 'Open Sans', sans-serif; vertical-align: middle;
}
body[data-nox-theme="dark"] .nox-ptn-count { background-color: #22354A; }

/* Category headings inside a table (v0.303.0). The recipe lists raw
   materials, packaging and accessories as one kind of line, grouped so it
   reads the way the shelf does. */
.nox-table tr.nox-rowgroup th {
	padding-top: 14px;
	background: transparent;
	font: 700 11.5px/1.6 'Montserrat', sans-serif;
	letter-spacing: .05em; text-transform: uppercase;
	border-bottom: 1px solid var(--nox-line);
}
.nox-table tr.nox-rowgroup:first-child th { padding-top: 4px; }

/* Checkpoint start form (v0.305.0): the amounts about to leave stock, shown
   for confirmation before the work begins. */
.nox-prod-start-form .nox-prod-take { margin: 8px 0 12px; }
.nox-prod-take td .nox-muted { display: block; font-size: 12px; margin-top: 2px; }

/* Traceability (v0.308.0): filters on one line, the trail below. */
.nox-trace-filters {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
.nox-trace-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.nox-trace-filters label > span { font-weight: 600; color: var(--nox-muted); }
.nox-trace-filters select,
.nox-trace-filters input { width: auto; min-width: 150px; }
.nox-trace-q { flex: 1 1 220px; }
.nox-trace-q input { width: 100%; }
.nox-trace-actions { display: flex; gap: 8px; }

.nox-trace-table td { vertical-align: top; }
.nox-trace-when { white-space: nowrap; }
.nox-trace-when .nox-muted { display: block; font-size: 12px; }
.nox-trace-what { font-weight: 600; }
.nox-trace-area { display: block; font-size: 12px; }
.nox-trace-detail summary {
	cursor: pointer; font-size: 12.5px; color: var(--nox-blue-ink);
	margin-top: 4px; list-style: none;
}
.nox-trace-detail summary::-webkit-details-marker { display: none; }
.nox-trace-detail p {
	margin: 4px 0 0; font-size: 12.5px; line-height: 1.5;
	color: var(--nox-muted); overflow-wrap: anywhere;
}
.nox-trace-pager {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	margin: 14px 0 0; font-size: 13px;
}

/* Traceability severity (v0.310.0).
   A thousand grey lines hide the six that matter, so red has to stay rare.
   Colour is carried by a dot plus a tinted left edge rather than by tinting
   the whole row: a wash of red across a table is read as "everything is
   broken", which is the opposite of drawing the eye to one line.

   Namespaced nox-tsev-* on purpose: nox-sev-critical is already QC's defect
   badge and paints a pink background, which these rows inherited. */
.nox-trace-dot {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	margin-right: 7px; vertical-align: 1px; background: var(--nox-line);
}
.nox-tsev-row td:first-child { border-left: 3px solid transparent; padding-left: 9px; }

.nox-tsev-critical .nox-trace-dot,
.nox-trace-dot.nox-tsev-critical { background: #C0392B; }
.nox-tsev-row.nox-tsev-critical td:first-child { border-left-color: #C0392B; }
.nox-tsev-row.nox-tsev-critical .nox-trace-what { color: #A5281B; }
body[data-nox-theme="dark"] .nox-tsev-critical .nox-trace-dot,
body[data-nox-theme="dark"] .nox-trace-dot.nox-tsev-critical { background-color: #E5705F; }
body[data-nox-theme="dark"] .nox-tsev-row.nox-tsev-critical td:first-child { border-left-color: #E5705F; }
body[data-nox-theme="dark"] .nox-tsev-row.nox-tsev-critical .nox-trace-what { color: #F0968A; }

.nox-tsev-notable .nox-trace-dot,
.nox-trace-dot.nox-tsev-notable { background: #C08A00; }
.nox-tsev-row.nox-tsev-notable td:first-child { border-left-color: #C08A00; }
body[data-nox-theme="dark"] .nox-tsev-notable .nox-trace-dot,
body[data-nox-theme="dark"] .nox-trace-dot.nox-tsev-notable { background-color: #E0B03A; }
body[data-nox-theme="dark"] .nox-tsev-row.nox-tsev-notable td:first-child { border-left-color: #E0B03A; }

.nox-trace-legend { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.nox-trace-legend li { font-size: 12.5px; line-height: 1.5; }
.nox-trace-legend strong { margin-right: 6px; color: var(--nox-ink); }
.nox-att-authorised { display: block; font-size: 12px; line-height: 1.4; }
.nox-att-nottouch { margin-top: 8px; }
.nox-att-report { display: block; margin-top: 8px; font-size: 11.5px; color: var(--nox-muted); }

/* Item catalog: where each thing actually is (v0.316.0). Small print under
   the name — present without competing with it, since the question it
   answers is "which shelf do I walk to", asked after the name is found. */
.nox-def-places {
	display: block; margin-top: 3px;
	font-size: 11.5px; line-height: 1.7; color: var(--nox-muted);
}
.nox-def-place { white-space: nowrap; }
.nox-def-place + .nox-def-place::before {
	content: '·'; margin: 0 6px; color: var(--nox-line);
}
.nox-def-place b {
	margin-left: 4px; font-weight: 700; color: var(--nox-ink);
	font-variant-numeric: tabular-nums;
}
.nox-def-place .nox-muted { margin-left: 3px; font-size: 11px; }

@media (max-width: 620px) {
	/* One location per line on a phone. Run together they overflowed the
	   row, and a shelf name broken across a line is unreadable anyway. */
	.nox-def-place { display: block; white-space: normal; overflow-wrap: anywhere; }
	.nox-def-place + .nox-def-place::before { content: none; margin: 0; }
	.nox-def-place b { float: right; margin-left: 8px; }
}

/* Inventory by storage (v0.317.0).
   A matrix is the right shape for comparing storages and the wrong shape
   for a phone. Rather than let it scroll sideways — which hides exactly the
   columns it exists to compare — each row becomes a labelled block below
   840px, so nothing is ever off screen. */
.nox-mx { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nox-mx thead th {
	font: 700 10.5px/1.4 'Montserrat', sans-serif; letter-spacing: .05em;
	text-transform: uppercase; color: var(--nox-muted);
	padding: 0 0 9px; text-align: right; white-space: nowrap;
}
.nox-mx thead th:first-child { text-align: left; }
.nox-mx th + th, .nox-mx td + td { padding-left: 18px; }
.nox-mx tbody td {
	padding: 10px 0; border-top: 1px solid var(--nox-line);
	text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nox-mx-name { text-align: left !important; font-weight: 600; color: var(--nox-ink); white-space: normal !important; }
.nox-mx-aside { display: block; margin-top: 2px; font-weight: 400; font-size: 11.5px; color: var(--nox-muted); }
.nox-mx .is-zero { color: #B7C2CD; }
body[data-nox-theme="dark"] .nox-mx .is-zero { color: #5A6B7D; }
.nox-mx-tot { font-weight: 700; }
.nox-mx tr.is-low .nox-mx-tot { color: #B03A2E; }
body[data-nox-theme="dark"] .nox-mx tr.is-low .nox-mx-tot { color: #F0968A; }
.nox-mx-grp th {
	padding: 16px 0 6px; border: 0; text-align: left;
	font: 700 11px/1.4 'Montserrat', sans-serif; letter-spacing: .05em; text-transform: uppercase;
}
.nox-mx tfoot td {
	border-top: 2px solid var(--nox-line); padding-top: 11px;
	text-align: right; font-weight: 700; font-size: 12.5px; color: var(--nox-muted);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 840px) {
	.nox-mx, .nox-mx tbody, .nox-mx tfoot, .nox-mx tr, .nox-mx td { display: block; width: auto; }
	.nox-mx thead { display: none; }
	.nox-mx tbody tr { padding: 10px 0; border-top: 1px solid var(--nox-line); }
	.nox-mx tbody td, .nox-mx tfoot td {
		border: 0; padding: 2px 0 2px 0; text-align: right;
		display: flex; justify-content: space-between; gap: 12px;
	}
	.nox-mx th + th, .nox-mx td + td { padding-left: 0; }
	.nox-mx tbody td::before, .nox-mx tfoot td::before {
		content: attr(data-label); font-weight: 400; color: var(--nox-muted);
		text-align: left; font-size: 12.5px;
	}
	.nox-mx-name { display: block !important; margin-bottom: 4px; }
	.nox-mx-name::before { content: none; }
	.nox-mx-grp th { display: block; padding: 14px 0 2px; }
	.nox-mx tfoot tr { padding-top: 10px; border-top: 2px solid var(--nox-line); }
}

/* Feed articles (v0.318.0). Long writing lives in the Knowledge base; the
   feed carries a card to it. */
.nox-art-box { margin-top: 10px; display: grid; gap: 8px; }
.nox-art-box input[type="text"] { font-size: 15px; font-weight: 600; }
.nox-art-lang { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12.5px; }
.nox-art-lang > span { color: var(--nox-muted); font-weight: 600; }
.nox-feed-article {
	display: block; margin-top: 10px; padding: 12px 14px;
	border: 1px solid var(--nox-line); border-radius: 12px;
	background: var(--nox-card); text-decoration: none;
}
.nox-feed-article:hover { border-color: var(--nox-bright); }
.nox-feed-article-k {
	font: 700 10.5px/1.4 'Montserrat', sans-serif; letter-spacing: .06em;
	text-transform: uppercase; color: var(--nox-muted);
}
.nox-feed-article-t { display: block; margin-top: 3px; font-weight: 700; color: var(--nox-ink); }
.nox-feed-article-x { display: block; margin-top: 3px; font-size: 12.5px; color: var(--nox-muted); }

/* .nox-field (v0.319.0).
   The class was used in five views and never had a base rule, so the <label>
   stayed inline and its caption sat beside the input instead of above it.
   The KB article editor showed it worst — two languages of that on one row —
   but every screen using it was wrong the same way. */
.nox-field { display: block; margin: 0 0 14px; }
.nox-field > span {
	display: block; margin-bottom: 5px;
	font-size: 12.5px; font-weight: 600; color: var(--nox-muted);
}
.nox-field > input,
.nox-field > select,
.nox-field > textarea { width: 100%; }
/* A tick is not a field caption: it belongs beside its box. */
.nox-field > input[type="checkbox"],
.nox-field > input[type="radio"] { width: auto; }
.nox-field > textarea { min-height: 120px; resize: vertical; }

/* KB categories (v0.320.0). */
.nox-kbcat-list { list-style: none; margin: 0 0 14px; padding: 0; }
.nox-kbcat-list li {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 0; border-top: 1px solid var(--nox-line);
}
.nox-kbcat-list li:first-child { border-top: 0; }
.nox-kbcat-name { font-weight: 600; color: var(--nox-ink); }
.nox-kbcat-list .nox-inline-form { margin-left: auto; }
.nox-kbcat-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
@media (max-width: 620px) { .nox-kbcat-form { grid-template-columns: 1fr; } }
.nox-kbcat-order { display: flex; align-items: center; gap: 6px; margin-right: 4px; }

/* KB article page (v0.323.0).
   Three faults on one screen: the Edit block sat before the title in the
   DOM and space-between pushed the heading to the far right; an authored
   article's single unnamed section rendered as an accordion with an empty
   summary — a lone chevron; and with no table of contents the body kept the
   two-column flex, leaving the text in a narrow strip. */
.nox-kb-section.is-plain { display: block; }
.nox-kb-section.is-plain > .nox-kb-section-body { padding-top: 0; }
.nox-kb-body.is-single { display: block; }
/* Left-aligned, not centred: the page reads better with one left edge
   shared by the breadcrumb, the title and the text. */
.nox-kb-body.is-single .nox-kb-article { max-width: 78ch; margin: 0; }
/* A closed shelf should say how much is on it before you open it. */
.nox-kb-group-count {
	/* inline-block and justify-self so it cannot stretch into a full-width
	   bar if it ever lands as a grid item in the shelf head. */
	display: inline-block; width: auto; justify-self: start;
	margin-left: 8px; padding: 1px 9px; border-radius: 999px; vertical-align: 2px;
	background: var(--nox-line); color: var(--nox-muted);
	font: 600 12px/1.7 'Open Sans', sans-serif;
}
body[data-nox-theme="dark"] .nox-kb-group-count { background-color: #22354A; }
.nox-kb-announce { margin-top: 18px; }
.nox-kb-announce .nox-check { display: block; margin-bottom: 6px; }
.nox-kb-announce .nox-field { max-width: 420px; margin-top: 10px; }

/* The voided-row inks are literal dark reds and ambers: on a dark card they
   would be ink-on-ink, and these are precisely the rows that must not
   disappear. Same lightening the generated skin applies elsewhere. */
body[data-nox-theme="dark"] .nox-void-tag { color: #E59B94; }
body[data-nox-theme="dark"] .nox-void-refunded > td.nox-void-keep .nox-void-tag { color: #E0A72A; }

/* v0.346.0 — e-commerce picking rules on a shelf. Blue, not the orange of
   the sales-source card: that card decides whether a whole room's stock is
   sellable, this one only narrows where inside it an order is picked from.
   Same colour would read as the same decision. */
.nox-pick-card { border-left: 4px solid var(--nox-line, #E1E8EF); }
.nox-pick-card.is-on { border-left-color: #1554A0; background: #F5F9FF; }
.nox-pick-prio { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #1554A0; color: #fff; font: 700 12px/22px 'Open Sans', sans-serif; text-align: center; }
.nox-pick-sku { font-weight: 600; }
.nox-pick-qty { color: var(--nox-muted, #5B7286); font-size: 12px; white-space: nowrap; }
.nox-pick-warn { color: #8A6400; font-size: 12px; white-space: nowrap; }

/* v0.347.0 — the board: tick what is on the shelf, rather than pick from a
   dropdown of the whole catalogue. */
.nox-pick-board { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nox-pick-board li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--nox-white, #fff); border-left: 3px solid transparent; }
.nox-pick-board li.is-picked { border-left-color: #1554A0; }
.nox-pick-board li.is-gone { background: #FFF4E5; }
.nox-pick-tick { display: flex; align-items: center; gap: 9px; flex: 1 1 220px; cursor: pointer; margin: 0; }
.nox-pick-tick input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; cursor: pointer; }
.nox-pick-rank { display: inline-flex; align-items: center; }
.nox-pick-rank label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--nox-muted, #5B7286); }
.nox-pick-rank input[type="number"] { width: 62px; }
.nox-pick-else { font-size: 12px; color: var(--nox-muted, #5B7286); flex: 1 1 100%; }
.nox-pick-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.nox-pick-actions .nox-field-hint { margin: 0; }
.nox-pick-where { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nox-pick-where li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #EEF4FC; font-size: 12px; }
.nox-pick-where li.is-dormant { background: #FFF4E5; color: #8A6400; }

body[data-nox-theme="dark"] .nox-pick-card.is-on { background-color: #1E2530; }
body[data-nox-theme="dark"] .nox-pick-board li { background-color: #2B303A; }
body[data-nox-theme="dark"] .nox-pick-board li.is-gone { background-color: #2A2620; }
body[data-nox-theme="dark"] .nox-pick-where li { background-color: #22354A; }
body[data-nox-theme="dark"] .nox-pick-where li.is-dormant { background-color: #2A2620; color: #E0A72A; }
body[data-nox-theme="dark"] .nox-pick-warn { color: #E0A72A; }

/* v0.348.0 — picking seen by product: one row per SKU, its shelves in
   draw-down order. The rank finally has siblings to rank against. */
.nox-pick-table td { vertical-align: top; }
.nox-pick-table .nox-pk-num { text-align: right; white-space: nowrap; }
.nox-pk-shelves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.nox-pk-shelves li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.nox-pk-rank { width: 58px; }
.nox-pk-drop { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; color: var(--nox-muted, #5B7286); cursor: pointer; }
.nox-pk-cascade-tag { font-size: 12px; color: var(--nox-muted, #5B7286); font-style: italic; }
.nox-pick-table tr.nox-pk-governed td:first-child { box-shadow: inset 3px 0 0 #1554A0; }
.nox-pick-table select { max-width: 260px; }

/* v0.349.0 — pick face starvation. Amber for "running low", red for "every
   sale reports short right now": the second is not a worse version of the
   first, it is already costing orders. */
.nox-face-card .nox-face-low td { background: #FFF9F0; }
.nox-face-card .nox-face-empty td { background: #FDF1F0; }
.nox-face-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #F6D3CF; color: #8A2B22; font-size: 11px; font-weight: 600; white-space: nowrap; }
.nox-face-tag.nox-face-move { background: #D8E6F6; color: #1554A0; }
.nox-face-shelves { color: var(--nox-muted, #5B7286); font-size: 12px; }
body[data-nox-theme="dark"] .nox-face-card .nox-face-low td { background-color: #2A2620; }
body[data-nox-theme="dark"] .nox-face-card .nox-face-empty td { background-color: #2E2222; }
body[data-nox-theme="dark"] .nox-face-tag { background-color: #4A2A26; color: #F0B4AC; }
body[data-nox-theme="dark"] .nox-face-tag.nox-face-move { background-color: #22354A; color: #9CC4EC; }

/* v0.350.0 — CS: first-reply speed, and who has heard nothing. */
.nox-metric-sub { display: block; font-size: 11px; color: var(--nox-muted, #5B7286); margin-top: 2px; }
.nox-unans-card { border-left: 4px solid #C43D3D; }
.nox-unans-card h2 { display: flex; align-items: center; gap: 10px; }
.nox-unans-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; background: #C43D3D; color: #fff; font: 700 12px/24px 'Open Sans', sans-serif; }
.nox-unans-nobody { color: #C43D3D; font-weight: 600; }
body[data-nox-theme="dark"] .nox-unans-card { border-left-color: #E07A72; }
body[data-nox-theme="dark"] .nox-unans-count { background-color: #A83530; }
body[data-nox-theme="dark"] .nox-unans-nobody { color: #E59B94; }

/* v0.351.0 — a ticket may cite several orders; each card says which it is. */
.nox-ordercard-of { font-size: 12px; font-weight: 600; color: var(--nox-muted, #5B7286); margin-left: 6px; }
.nox-ordercard + .nox-ordercard { margin-top: 14px; }

/* =====================================================================
   v0.352.0 — GENIUS: the identity, applied
   ---------------------------------------------------------------------
   One mark, one wordmark, four states. The node in the mouth of the G is
   the live element in all of them: it beats while the app idles, runs
   while something loads, opens a ring when you touch the logo and
   flashes green when an action lands. Everything is SVG + CSS — no
   library, no required JS — and every animation is switched off under
   prefers-reduced-motion, where the mark simply sits fully drawn.
   ===================================================================== */

/* --- lockup ---------------------------------------------------------- */

.nox-brand { display: inline-flex; align-items: center; gap: 13px; line-height: 1; }
.nox-brand-v { flex-direction: column; gap: 12px; }
.nox-brand-mark { display: block; flex: none; overflow: visible; }

.nox-wm-stack { display: flex; flex-direction: column; }
.nox-brand-v .nox-wm-stack { align-items: center; }

/* The wordmark inherits the lockup's colour, and the lockup's colour is
   decided by its tone. That way one call renders correctly on a navy
   header, a white document and a dark-mode panel without knowing which
   of the three it landed in. */
.nox-brand { color: var(--nox-navy); }
.nox-brand-tone-white,
.nox-brand-tone-mono-white { color: var(--nox-white); }
.nox-brand-tone-navy,
.nox-brand-tone-mono-navy { color: var(--nox-navy); }
body[data-nox-theme="dark"] .nox-brand-tone-color { color: #E6EAF0; }

.nox-wm {
	display: inline-flex;
	font-family: var(--nox-font-head);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: .22em;
	/* Letter-spacing also trails the S, which throws a centred lockup
	   half a space to the left. Pull the phantom gap back. */
	margin-right: -.22em;
	color: currentColor;
	white-space: nowrap;
}
/* The N is the node's colour — that is the whole idea of the wordmark. */
.nox-wm-n { color: var(--nox-bright); }
/* Except where the mark is a single ink; a lit N there breaks the rule
   the tone exists to keep. */
.nox-brand-tone-mono-white .nox-wm-n,
.nox-brand-tone-mono-navy .nox-wm-n,
.nox-brand-tone-current .nox-wm-n { color: inherit; }

.nox-wm-byline {
	font-family: var(--nox-font-head);
	font-weight: 600;
	font-size: 9px;
	letter-spacing: .38em;
	margin-right: -.38em;
	text-transform: uppercase;
	color: var(--nox-muted);
	margin-top: 6px;
}
.nox-brand-tone-white .nox-wm-byline { color: var(--nox-bright); opacity: .9; }
.nox-brand-tone-mono-white .nox-wm-byline,
.nox-brand-tone-current .nox-wm-byline { color: inherit; opacity: .7; }
body[data-nox-theme="dark"] .nox-brand-tone-color .nox-wm-byline { color: #8B94A3; }

/* --- header ---------------------------------------------------------- */

.nox-brand-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	border-radius: var(--nox-r-sm);
	padding: 4px 6px;
	margin-left: -6px;
}
.nox-brand-link:focus-visible { outline: 3px solid var(--nox-bright); outline-offset: 2px; }
.nox-header .nox-brand .nox-wm { font-size: 16px; }
.nox-header .nox-brand { gap: 11px; }

@media (max-width: 900px) {
	.nox-header .nox-wm-byline { display: none; }
}
@media (max-width: 560px) {
	/* The mark alone still says GENIUS; the room goes to the clock and
	   the punch buttons, which is what a phone is actually used for here. */
	.nox-header .nox-wm-stack { display: none; }
}

/* --- login ----------------------------------------------------------- */

.nox-login-brand { margin-bottom: 30px; }
.nox-login-brand .nox-wm { font-size: 27px; }
.nox-login-brand .nox-wm-byline { font-size: 10px; margin-top: 8px; }

/* --- the node lives: idle beat --------------------------------------- */

.nox-brand-node { transform-box: fill-box; transform-origin: center; }
.nox-brand-beat .nox-brand-node { animation: nox-brand-beat 2.6s ease-in-out infinite; }

@keyframes nox-brand-beat {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.22); }
}

/* --- the node answers: ring on hover / focus ------------------------- */

.nox-brand-ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.nox-brand-link:hover .nox-brand-ring,
.nox-brand-link:focus-visible .nox-brand-ring { animation: nox-brand-ring 1.6s ease-out infinite; }

@keyframes nox-brand-ring {
	0%        { transform: scale(1); opacity: .9; }
	70%, 100% { transform: scale(3.4); opacity: 0; }
}

/* --- the node confirms: one green flash ------------------------------ */

.nox-brand-ok .nox-brand-node { animation: nox-brand-ok 1.5s ease-in-out 1; }

@keyframes nox-brand-ok {
	0%, 100%  { fill: var(--nox-bright); }
	25%, 65%  { fill: #1E9E5A; }
}

/* --- the entrance (login, once) -------------------------------------- */

.nox-brand-draw .nox-brand-g { animation: nox-brand-draw 1.15s ease-in-out both; }
.nox-brand-draw .nox-brand-node { animation: nox-brand-pop .55s cubic-bezier(.34, 1.56, .64, 1) .78s both; }

@keyframes nox-brand-draw {
	from { stroke-dasharray: 100; stroke-dashoffset: 100; }
	to   { stroke-dasharray: 100; stroke-dashoffset: 0; }
}
@keyframes nox-brand-pop {
	from { transform: scale(0); opacity: 0; }
	60%  { transform: scale(1.35); opacity: 1; }
	to   { transform: scale(1); opacity: 1; }
}

/* The word assembles after the mark, letter by letter, and the N lands
   already lit — the same bright as the node that just popped. */
.nox-brand-intro .nox-wm-l { display: inline-block; animation: nox-brand-letter .42s ease-out both; }
.nox-brand-intro .nox-wm-l1 { animation-delay: 1.00s; }
.nox-brand-intro .nox-wm-l2 { animation-delay: 1.09s; }
.nox-brand-intro .nox-wm-l3 { animation-delay: 1.18s; }
.nox-brand-intro .nox-wm-l4 { animation-delay: 1.27s; }
.nox-brand-intro .nox-wm-l5 { animation-delay: 1.36s; }
.nox-brand-intro .nox-wm-l6 { animation-delay: 1.45s; }
.nox-brand-intro .nox-wm-byline { animation: nox-brand-fade .6s ease both; animation-delay: 1.7s; }

@keyframes nox-brand-letter {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: none; }
}
@keyframes nox-brand-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --- the loader: the logo does the waiting --------------------------- */

.nox-brand-loader {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--nox-muted);
	font-size: 13.5px;
}
.nox-brand-loader-svg { flex: none; }
.nox-brand-loader-track { stroke: var(--nox-pale); }
.nox-brand-loader-run { stroke: var(--nox-bright); animation: nox-brand-run 1.4s linear infinite; }
.nox-brand-loader-node { fill: var(--nox-blue); transform-box: fill-box; transform-origin: center; animation: nox-brand-beat 1.4s ease-in-out infinite; }

body[data-nox-theme="dark"] .nox-brand-loader-track { stroke: #2A2F3A; }
body[data-nox-theme="dark"] .nox-brand-loader { color: #8B94A3; }

@keyframes nox-brand-run {
	from { stroke-dashoffset: 100; }
	to   { stroke-dashoffset: 0; }
}

/* A loader that stands on its own line (drawers, popovers, empty panels). */
.nox-brand-loader-block {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 28px 16px;
	width: 100%;
}

/* --- print: the band carries the mark, not a hotlinked bitmap -------- */

@media print {
	.nox-print-head .nox-brand-mark { width: 26px; height: 26px; }
	.nox-print-head .nox-wm { font-size: 15px; color: #fff; }
	.nox-print-head .nox-wm-byline { font-size: 7px; color: #cfe3f5; }
}

/* --- motion is a courtesy, not a requirement ------------------------- */

@media (prefers-reduced-motion: reduce) {
	.nox-brand-mark *,
	.nox-brand-loader-svg *,
	.nox-wm-l,
	.nox-wm-byline {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		stroke-dashoffset: 0 !important;
	}
	/* Without a runner the loader would read as a finished mark, so the
	   track carries the accent and the text does the talking. */
	.nox-brand-loader-run { stroke: var(--nox-bright); stroke-dasharray: none; }
}

/* =====================================================================
   v1.1.0 — the loading screen, and the mark inside the confirm dialog
   ---------------------------------------------------------------------
   Between a click and the next page this app used to show nothing at
   all, so a slow report and a dead button looked identical. The mark
   now covers the page and works. It fades in rather than appearing:
   after a 220ms delay, an instant cut reads as a flicker.
   ===================================================================== */

.nox-loading {
	position: fixed;
	inset: 0;
	z-index: 5000; /* Over the confirm dialog (4000): it is what follows it. */
	display: flex;
	align-items: center;
	justify-content: center;
	/* Not opaque: the page underneath stays half-visible, so the wait
	   reads as this page working rather than as a different screen. */
	background: rgba(244, 247, 251, .92);
	opacity: 0;
	transition: opacity .18s ease;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.nox-loading[hidden] { display: none; }
.nox-loading.is-in { opacity: 1; }

body[data-nox-theme="dark"] .nox-loading { background: rgba(21, 24, 30, .92); }

/* Stacked, not side by side: at this size the mark is the subject and
   the word underneath is the caption. */
.nox-loading-mark {
	flex-direction: column;
	gap: 18px;
	font-size: 14px;
	letter-spacing: .02em;
}

/* --- the confirm dialog carries the mark ----------------------------- */

.nox-confirm-card h3 {
	display: flex;
	align-items: center;
	gap: 10px;
}
.nox-confirm-card h3 .nox-brand-mark { flex: none; }

/* While the action is on its way the dialog stops offering choices and
   starts reporting: the buttons give way to the mark, running. */
.nox-confirm-working {
	display: none;
	justify-content: flex-end;
	padding-top: 2px;
}
.nox-confirm-overlay.is-working .nox-confirm-actions { display: none; }
.nox-confirm-overlay.is-working .nox-confirm-working { display: flex; }

/* The login is a navy field, so the loading screen over it is navy too —
   a pale scrim there washed the whole brand out. Same mark, dressed for
   the surface it is standing on. */
.nox-login-body .nox-loading { background: rgba(10, 31, 60, .90); }
.nox-login-body .nox-brand-loader-track { stroke: rgba(255, 255, 255, .16); }
.nox-login-body .nox-brand-loader-node { fill: var(--nox-bright); }
.nox-login-body .nox-brand-loader { color: #C7D6E6; }

/* =====================================================================
   Marketing (v1.8.0)

   Every colour here is either a theme token or a value handed in from
   PHP through --mkt-b / --mkt-s / --mkt-p (brand, status, provider).
   That is deliberate: the brand palette belongs to the brands and must
   not shift between light and dark, and everything around it is a token
   that already does. No literal ink is set below, so nothing in this
   layer can become dark text on a dark surface.
   ===================================================================== */

/* --- Filter bar ---------------------------------------------------- */
.nox-mkt-filters {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
	margin: 0 0 18px;
}
.nox-mkt-filter-label {
	display: block; font-size: 11.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--nox-muted); margin-bottom: 5px;
}
.nox-mkt-filter-field { display: block; }
.nox-mkt-filter-field select,
.nox-mkt-filter-field input { min-width: 160px; }
.nox-mkt-clear { font-size: 12.5px; color: var(--nox-muted); align-self: center; }

/* The brand picker. The radio itself is off-screen rather than
   display:none — a hidden input is skipped by keyboard navigation, and
   this is the primary control on three screens. */
.nox-mkt-brandbar { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.nox-mkt-brandpick {
	position: relative; display: inline-flex; align-items: center;
	border: 1.5px solid var(--nox-line); border-radius: var(--nox-r-pill);
	padding: 5px 13px; font-size: 12px; font-weight: 700; cursor: pointer;
	color: var(--mkt-b, var(--nox-muted));
	background: var(--nox-card);
	transition: border-color .12s ease, box-shadow .12s ease;
}
.nox-mkt-brandpick input {
	position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.nox-mkt-brandpick.is-on,
.nox-mkt-brandpick:has(input:checked) {
	border-color: var(--mkt-b, var(--nox-blue));
	box-shadow: inset 0 0 0 1px var(--mkt-b, var(--nox-blue));
}
.nox-mkt-brandpick:focus-within {
	outline: 2px solid var(--nox-bright); outline-offset: 2px;
}

.nox-mkt-pfbar { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.nox-mkt-pfpick { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }

/* --- Board --------------------------------------------------------- */
.nox-mkt-board {
	display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr));
	gap: 12px; overflow-x: auto; padding-bottom: 6px;
}
.nox-mkt-col {
	background: var(--nox-surface-2); border-radius: var(--nox-r-md);
	padding: 11px; min-height: 180px;
}
.nox-mkt-col-head {
	display: flex; align-items: center; gap: 8px; margin: 0 0 11px;
	font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
	color: var(--nox-ink);
}
.nox-mkt-dot {
	width: 9px; height: 9px; border-radius: 50%; flex: none;
	background: var(--mkt-s, var(--nox-muted));
}
.nox-mkt-count {
	margin-left: auto; font-size: 11px; font-weight: 700;
	background: var(--nox-card); color: var(--nox-muted);
	border-radius: var(--nox-r-pill); padding: 2px 9px;
}
.nox-mkt-col-body { display: flex; flex-direction: column; gap: 9px; }
.nox-mkt-col-empty { margin: 0; color: var(--nox-muted); font-size: 13px; }

.nox-mkt-card {
	background: var(--nox-card); border: 1px solid var(--nox-line);
	border-radius: var(--nox-r-md); padding: 11px 12px; box-shadow: var(--nox-e1);
	position: relative;
}
.nox-mkt-card-title { margin: 0 0 7px; font-size: 13.5px; line-height: 1.35; }
.nox-mkt-card-title a { color: var(--nox-ink); text-decoration: none; }
.nox-mkt-card-title a:hover { text-decoration: underline; }

.nox-mkt-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.nox-mkt-btag {
	display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .03em;
	border-radius: var(--nox-r-pill); padding: 2px 8px;
	background: var(--mkt-b, var(--nox-muted)); color: #FFFFFF;
}
.nox-mkt-btag.is-big { font-size: 11.5px; padding: 3px 11px; }

.nox-mkt-meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	font-size: 11.5px; color: var(--nox-muted);
}
.nox-mkt-pf {
	background: var(--nox-pale); color: var(--nox-blue-ink);
	border-radius: 6px; padding: 1px 7px; font-weight: 600;
}
.nox-mkt-due { color: var(--mod-marketing); font-weight: 700; }
.nox-mkt-out { color: var(--nox-muted); font-weight: 700; }
.nox-mkt-tasks { font-weight: 600; }
.nox-mkt-owner {
	margin-left: auto; max-width: 45%; overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap;
}

/* Moving a card is two small buttons, not a drag. Drag-and-drop would
   need JavaScript to be the only way to use the board, and this board
   has to work for a supervisor on a phone. */
.nox-mkt-move { display: flex; gap: 4px; margin-top: 9px; }
.nox-mkt-move form { margin: 0; }
.nox-mkt-movebtn {
	border: 1px solid var(--nox-line); background: var(--nox-card);
	color: var(--nox-muted); border-radius: 7px;
	width: 26px; height: 24px; line-height: 1; cursor: pointer; font-size: 14px;
}
.nox-mkt-movebtn:hover { border-color: var(--mod-marketing); color: var(--mod-marketing); }

/* --- Calendar ------------------------------------------------------ */
.nox-mkt-monthbar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.nox-mkt-monthbar h2 { margin: 0; font-size: 17px; }
.nox-mkt-navbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border: 1px solid var(--nox-line);
	border-radius: 8px; color: var(--nox-muted); text-decoration: none;
	background: var(--nox-card);
}
.nox-mkt-navbtn:hover { border-color: var(--mod-marketing); color: var(--mod-marketing); }
.nox-mkt-legend { font-size: 11.5px; color: var(--nox-muted); }

.nox-mkt-cal { padding: 0; overflow: hidden; }
.nox-mkt-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.nox-mkt-dow {
	background: var(--nox-navy); color: #FFFFFF;
	font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
	text-transform: uppercase; text-align: center; padding: 8px 4px;
}
.nox-mkt-day {
	border-top: 1px solid var(--nox-line); border-left: 1px solid var(--nox-line);
	min-height: 86px; padding: 5px; font-size: 11px; min-width: 0;
}
.nox-mkt-day.is-off { background: var(--nox-surface); }
.nox-mkt-day.is-today { background: var(--nox-pale); }
.nox-mkt-daynum { font-size: 11.5px; font-weight: 700; color: var(--nox-muted); margin-bottom: 4px; }
.nox-mkt-day.is-today .nox-mkt-daynum { color: var(--nox-blue-ink); }

.nox-mkt-ev {
	display: block; border-radius: 7px; padding: 3px 7px; margin-bottom: 3px;
	background: var(--mkt-b, var(--nox-muted)); color: #FFFFFF;
	font-size: 10.5px; font-weight: 700; text-decoration: none;
	overflow: hidden;
}
.nox-mkt-ev:hover { filter: brightness(1.08); }
.nox-mkt-ev-t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-mkt-ev-s { display: block; font-weight: 400; opacity: .85; font-size: 9.5px; }
/* Already out. Faded and struck through, so a glance down the month
   separates what happened from what is still owed. */
.nox-mkt-ev.is-out { opacity: .55; }
.nox-mkt-ev.is-out .nox-mkt-ev-t { text-decoration: line-through; }

/* --- List ---------------------------------------------------------- */
.nox-mkt-tally {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px; margin: 0 0 18px;
}
.nox-mkt-tally-cell {
	background: var(--nox-card); border: 1px solid var(--nox-line);
	border-left: 4px solid var(--mkt-s, var(--nox-muted));
	border-radius: var(--nox-r-md); padding: 11px 14px; box-shadow: var(--nox-e1);
}
.nox-mkt-tally-n { display: block; font-family: var(--nox-font-head); font-size: 22px; font-weight: 800; color: var(--nox-ink); }
.nox-mkt-tally-l { display: block; font-size: 11.5px; color: var(--nox-muted); }

.nox-mkt-status {
	display: inline-block; border-radius: var(--nox-r-pill);
	padding: 2px 10px; font-size: 11px; font-weight: 800;
	background: var(--mkt-s, var(--nox-muted)); color: #FFFFFF;
}
.nox-mkt-status.is-big { font-size: 12px; padding: 4px 13px; }

/* --- One piece ------------------------------------------------------ */
.nox-mkt-hero { margin-bottom: 16px; }
.nox-mkt-herorow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.nox-mkt-projpill {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--nox-pale); color: var(--nox-blue-ink);
	border-radius: var(--nox-r-pill); padding: 4px 12px;
	font-size: 11.5px; font-weight: 700; text-decoration: none;
}
.nox-mkt-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.nox-mkt-steps form { margin: 0; }

.nox-mkt-detail { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.nox-mkt-main, .nox-mkt-side { min-width: 0; }

.nox-mkt-copybox {
	background: var(--nox-surface); border: 1px solid var(--nox-line);
	border-radius: var(--nox-r-sm); padding: 12px 14px;
	font-size: 13.5px; line-height: 1.55; color: var(--nox-ink);
}

.nox-mkt-assets { display: grid; gap: 12px; }
.nox-mkt-asset { border: 1px solid var(--nox-line); border-radius: var(--nox-r-md); overflow: hidden; }
.nox-mkt-asset-head {
	display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
	padding: 8px 12px; background: var(--nox-surface);
	border-bottom: 1px solid var(--nox-line); font-size: 12.5px;
}
.nox-mkt-prov {
	font-size: 10px; font-weight: 800; border-radius: 6px; padding: 2px 8px;
	background: var(--mkt-p, var(--nox-muted)); color: #FFFFFF; flex: none;
}
.nox-mkt-asset-t {
	font-weight: 600; color: var(--nox-ink); min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nox-mkt-asset-out { margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nox-mkt-asset-del { margin: 0; }
.nox-mkt-asset-x {
	border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1;
	color: var(--nox-muted); padding: 0 2px;
}
/* The one literal ink in this layer, so it carries its own dark rule —
   the same pairing the rest of the file uses for danger red. */
.nox-mkt-asset-x:hover { color: #B4232A; }
body[data-nox-theme="dark"] .nox-mkt-asset-x:hover { color: #E89296; }
.nox-mkt-asset-note { margin: 10px 12px; font-size: 12px; color: var(--nox-muted); word-break: break-word; }

/* aspect-ratio and not a padding-top box: the video is the only thing
   in the frame, and every browser the platform supports has it. */
.nox-mkt-embed { background: var(--nox-surface-2); }
.nox-mkt-embed.is-video { aspect-ratio: 16 / 9; }
.nox-mkt-embed.is-doc { aspect-ratio: 16 / 10; }
.nox-mkt-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.nox-mkt-addasset {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
	margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--nox-line);
}
.nox-mkt-addasset label { display: block; flex: 1 1 200px; }
.nox-mkt-addasset label > span {
	display: block; font-size: 12.5px; font-weight: 600;
	color: var(--nox-muted); margin-bottom: 4px;
}
.nox-mkt-addasset input { width: 100%; box-sizing: border-box; }
.nox-mkt-addasset .nox-field-hint { flex-basis: 100%; margin: 0; }

.nox-mkt-kv { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.nox-mkt-kv dt {
	font-size: 11.5px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .04em; color: var(--nox-muted); margin-top: 11px;
}
.nox-mkt-kv dd { margin: 2px 0 0; font-size: 13.5px; color: var(--nox-ink); }

.nox-mkt-task {
	display: flex; align-items: center; gap: 9px;
	border: 1px solid var(--nox-line); border-radius: var(--nox-r-sm);
	padding: 8px 11px; margin-bottom: 8px; font-size: 12.5px;
}
.nox-mkt-task a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-mkt-task form { margin: 0 0 0 auto; }
.nox-mkt-linktask { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.nox-mkt-linktask select { min-width: 0; flex: 1 1 auto; }
.nox-mkt-newtask { margin: 10px 0 0; font-size: 12.5px; }

.nox-mkt-copy textarea { width: 100%; box-sizing: border-box; }

@media (max-width: 1000px) {
	.nox-mkt-detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	/* The board keeps five real columns and scrolls sideways. Squeezing
	   them into two rows loses the left-to-right reading of the process,
	   which is the only thing the board is for. */
	.nox-mkt-board { grid-template-columns: repeat(5, 78vw); }
	.nox-mkt-day { min-height: 68px; }
}

/* A marketing piece shown on the company calendar. Same chip as every
   other one there, so the grid stays one thing; the strike-through is the
   only difference and it means the same as it does inside the module. */
.nox-cal-mkt { text-decoration: none; }
.nox-cal-mkt.is-out { opacity: .6; }
.nox-cal-mkt.is-out span { text-decoration: line-through; }
.nox-legend-mkt { color: var(--mod-marketing); }

/* --- Marketing archive (v1.8.0) ------------------------------------- */
/* A put-away piece is still a piece: it keeps its shape and loses its
   emphasis. Greying it out entirely would make the archive unreadable,
   which is the opposite of what an archive is for. */
.nox-mkt-archline { margin: -8px 0 16px; font-size: 12.5px; }
.nox-mkt-archline strong { color: var(--nox-ink); margin-right: 8px; }

.nox-mkt-card.is-archived { background: var(--nox-surface); }
.nox-mkt-card.is-archived .nox-mkt-card-title a { color: var(--nox-muted); }

.nox-mkt-movebtn.is-wide { width: auto; padding: 0 10px; font-size: 12px; }
.nox-mkt-movebtn.is-put { margin-left: auto; }

.nox-mkt-closemonth {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	background: var(--nox-pale); border-radius: var(--nox-r-md);
	padding: 10px 14px; margin: 0 0 16px; font-size: 13px;
	color: var(--nox-blue-ink);
}

.nox-mkt-archbanner {
	background: var(--nox-surface-2); border-radius: var(--nox-r-sm);
	padding: 8px 12px; margin: 0 0 12px;
	font-size: 12.5px; color: var(--nox-muted);
}
.nox-mkt-archtag {
	display: inline-block; margin-left: 6px;
	border: 1px solid var(--nox-line); border-radius: var(--nox-r-pill);
	padding: 1px 8px; font-size: 10.5px; font-weight: 700; color: var(--nox-muted);
}