/**
 * The OCC UI standard: the front end's shared tokens and components. D-365.
 * File: assets/css/occ-ui.css
 *
 * Decided by Philipp, 2026-09-25, on the canvas "OCC Pills and Highlights
 * Mockup" (board 7, "The standard"). tokens.css and components.css serve
 * wp-admin only; until this file the front end had no shared layer, and 13
 * stylesheets each chose their own greys, pills and burgundy.
 *
 * -- Where it loads ----------------------------------------------------------
 *
 * Every front-end page (OCC_UI). The dashboard sidebar is on the theme's own
 * pages too (My Jobs, Messages ...), where no OCC module stylesheet loads.
 * Module front-end stylesheets list it as a dependency, so its tokens are
 * always defined before they are used.
 *
 * -- The rules it keeps -----------------------------------------------------
 *
 *   burgundy   primary buttons and the current sidebar icon, nothing else
 *   navy       what is selected (a person, a company, a row)
 *   grey       everything else: hover, counts, filters, initials
 *   dots       a role or a status is a white chip with a coloured dot:
 *              green done, amber attention, red problem, navy information,
 *              grey neutral; agency violet, client teal, staff blue, and a
 *              team member's dot is a ring
 *   sizes      whole pixels only; a fractional font size or height renders
 *              soft, and a row that starts on a fractional pixel leaves an
 *              SVG icon off the line of the text beside it
 *
 * Builds: b10.529 (tokens, sidebar, filter chips, counts, initials, selected
 * rows, role chip); b10.531 (status chips); b10.532 (buttons and tabs);
 * type, cards, tables and notices follow (PLAN-D-365-ui-standard.md).
 * b10.674: the field and chosen-option tokens (D-394).
 * b10.1031: set D, OUR STYLE (D-454): buttons, groups, split button, text
 * link, switch, tick box, choice, tooltip T2 (at the end of this file).
 */

:root {
	--occ-ui-text: #101828;
	--occ-ui-text-2: #344054;
	--occ-ui-text-3: #475467;
	--occ-ui-muted: #667085;
	--occ-ui-faint: #98a2b3;
	--occ-ui-border: #d0d5dd;
	--occ-ui-line: #e4e7ec;
	--occ-ui-line-soft: #eaecf0;
	--occ-ui-fill: #f2f4f7;
	--occ-ui-fill-soft: #f9fafb;
	--occ-ui-page: #f5f7fc;
	--occ-ui-white: #ffffff;
	--occ-ui-brand: #a41e32;
	--occ-ui-brand-hover: #7d1626;
	--occ-ui-selected: #eef4fb;
	--occ-ui-navy: #1e3a5f;
	--occ-ui-focus: #d5e3f6;
	--occ-ui-tile-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
	--occ-ui-dot-green: #12b76a;
	--occ-ui-dot-amber: #dc9c00;
	--occ-ui-dot-red: #f04438;
	--occ-ui-dot-navy: #2f5d95;
	--occ-ui-dot-grey: #98a2b3;
	--occ-ui-dot-agency: #7a5af8;
	--occ-ui-dot-client: #15b79e;
	--occ-ui-dot-staff: #0ba5ec;

	/* Build 3: actions with a meaning, solid or soft, and the focus ring. */
	--occ-ui-green: #067647;
	--occ-ui-green-hover: #05603a;
	--occ-ui-green-soft: #ecfdf3;
	--occ-ui-green-line: #abefc6;
	--occ-ui-blue: #2f5d95;
	--occ-ui-blue-hover: #254a78;
	--occ-ui-blue-soft: #eef4fb;
	--occ-ui-blue-line: #cddcf0;
	--occ-ui-red: #d92d20;
	--occ-ui-red-hover: #b42318;
	--occ-ui-red-soft: #fef3f2;
	--occ-ui-red-soft-hover: #fee4e2;
	--occ-ui-red-line: #fecdca;
	--occ-ui-red-text: #b42318;
	--occ-ui-focus-ring: #2f5d95;

	/*
	 * D-394 (b10.674), Philipp: one field look for every OCC form, "white,
	 * bordered". A field is white with a 1px grey border and 8px corners, 44px
	 * tall (40px inside a table row), 14px text; focus is a navy border with a
	 * pale navy ring. A chosen option (a button, a tile, an industry) is pale
	 * navy with a navy edge and navy words: navy is what is selected, burgundy
	 * stays for the main button.
	 */
	--occ-ui-field-h: 44px;
	--occ-ui-field-h-sm: 40px;
	--occ-ui-field-bg: #ffffff;
	--occ-ui-field-border: #d0d5dd;
	--occ-ui-field-radius: 8px;
	--occ-ui-field-text: #101828;
	--occ-ui-field-placeholder: #667085;
	--occ-ui-field-focus: 0 0 0 3px #d5e3f6;
	--occ-ui-chosen-bg: #eef4fb;
	--occ-ui-chosen-line: #2f5d95;
	--occ-ui-chosen-text: #1e3a5f;

	/*
	 * Lucide icons (ISC, assets/vendor/lucide) drawn as masks, so a button
	 * needs no markup for its icon and the icon takes the button's colour.
	 */
	--occ-ui-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
	--occ-ui-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--occ-ui-icon-user-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' x2='19' y1='8' y2='14'/%3E%3Cline x1='22' x2='16' y1='11' y2='11'/%3E%3C/svg%3E");
	--occ-ui-icon-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17V7'/%3E%3Cpath d='M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8'/%3E%3Cpath d='M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	--occ-ui-icon-user-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='17' x2='22' y1='8' y2='13'/%3E%3Cline x1='22' x2='17' y1='8' y2='13'/%3E%3C/svg%3E");
	--occ-ui-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
	--occ-ui-icon-clipboard-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
	--occ-ui-icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- sidebar
 *
 * The dashboard sidebar (Superio's menu_short_profile, drawn by the theme or
 * by OCC's dashboard nav widget). The theme's own rules are
 * `.menu_short_profile li a` (0,1,2) and `.menu_short_profile li:hover > a`,
 * `li.active > a` (0,2,2); these outrank them without !important.
 *
 * The current page is a plain grey fill: no border, no shadow, no burgundy
 * tint. Rows are 44px, so every row starts on a whole pixel when the list
 * does; the icon is a 20px flex item centred on the row and lifted 1px, which
 * puts it on the middle of the capitals rather than of the line box.
 */
ul.menu_short_profile > li {
	margin: 0 0 2px;
	padding: 0;
}

ul.menu_short_profile > li > a {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border-radius: 10px;
	background: transparent;
	box-shadow: none;
	color: var(--occ-ui-text-3);
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}

ul.menu_short_profile > li > a i.occ-lucide {
	display: inline-flex;
	flex: 0 0 20px;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--occ-ui-muted);
}

ul.menu_short_profile > li > a i.occ-lucide svg {
	position: relative;
	top: -1px;
	width: 20px;
	height: 20px;
	vertical-align: 0;
}

ul.menu_short_profile > li:hover > a,
ul.menu_short_profile > li > a:focus {
	background: var(--occ-ui-fill-soft);
	color: var(--occ-ui-text);
}

ul.menu_short_profile > li:hover > a i.occ-lucide,
ul.menu_short_profile > li > a:focus i.occ-lucide {
	color: var(--occ-ui-text-2);
}

ul.menu_short_profile > li:is(.active, .current-menu-item) > a {
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text);
	font-weight: 600;
}

ul.menu_short_profile > li:is(.active, .current-menu-item) > a i.occ-lucide {
	color: var(--occ-ui-brand);
}

ul.menu_short_profile > li > a:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--occ-ui-focus);
}

/*
 * The header's account menu (Superio's user_info widget, `ul.topmenu-menu`)
 * lists the same pages. The theme tints its hover and current item in the
 * brand's pale pink (`.topmenu-menu > li.active > a`, 0,2,2); b10.546 gives it
 * the sidebar's greys so the two menus agree.
 */
ul.topmenu-menu > li:hover > a,
ul.topmenu-menu > li > a:focus {
	background: var(--occ-ui-fill-soft);
	color: var(--occ-ui-text);
}

ul.topmenu-menu > li:is(.active, .current-menu-item) > a {
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text);
	font-weight: 600;
}

/*
 * D-385: grouped dashboard menus (OCC_Menu_Groups), in the sidebar and the
 * header's pull-down alike. A heading is a small grey label, not a link; the
 * items ticked "Show in the foot row" sit on one line under a rule. The
 * pull-down's own rules (D-363, 0,4,2) are outranked by the second selector.
 */
ul.occ-menu-grouped > li.occ-menu-heading {
	margin: 0;
	padding: 14px 14px 4px;
	background: none;
}

ul.occ-menu-grouped > li.occ-menu-heading:first-child {
	padding-top: 4px;
}

ul.occ-menu-grouped > li.occ-menu-heading > .occ-menu-heading-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--occ-ui-muted);
}

.occ-header-account ul.occ-menu-grouped > li.occ-menu-heading {
	padding: 10px 14px 2px;
}

ul.occ-menu-grouped > li.occ-menu-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 10px 0 0;
	padding: 12px 14px 4px;
	border-top: 1px solid var(--occ-ui-line-soft);
	background: none;
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link,
.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link {
	display: inline;
	width: auto;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	color: var(--occ-ui-text-3);
	text-decoration: none;
}

/* b10.642, Philipp: no underline on hover; the words darken instead. */
ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link:is(:hover, :focus),
.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link:is(:hover, :focus) {
	background: none;
	color: var(--occ-ui-text);
	text-decoration: none;
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link[aria-current="page"] {
	font-weight: 600;
	color: var(--occ-ui-text);
}

ul.occ-menu-grouped .occ-menu-foot-sep {
	color: var(--occ-ui-faint);
}

/*
 * b10.636: a foot link drawn as an icon alone (Help), at the row's right end,
 * with a hit area bigger than the icon.
 */
ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon,
.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 28px;
	/* b10.642: no taller than the row's line, or the pull-down grew a scrollbar (2px over). */
	margin: -4px -6px -4px auto;
	border-radius: 8px;
	color: var(--occ-ui-muted);
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon:is(:hover, :focus),
ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon[aria-current="page"],
.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon:is(:hover, :focus) {
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text);
	text-decoration: none;
}

/*
 * D-450: two icons side by side at the row's end (Notifications and Help):
 * only the first takes the free space, and the bell carries the new count.
 */
ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon + a.occ-menu-foot-link--icon,
.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon + a.occ-menu-foot-link--icon {
	margin-left: 2px;
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon:has(+ a.occ-menu-foot-link--icon),
.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon:has(+ a.occ-menu-foot-link--icon) {
	margin-right: 0;
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon,
.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon {
	position: relative;
}

.occ-menu-foot-badge {
	position: absolute;
	top: -3px;
	right: -2px;
	box-sizing: border-box;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--occ-ui-blue, #2f5d95);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	pointer-events: none;
}

.occ-menu-foot-badge[hidden] {
	display: none;
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--occ-ui-focus);
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon i.occ-lucide {
	display: inline-flex;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	font-size: 18px;
	line-height: 1;
	color: inherit;
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon i.occ-lucide svg {
	position: static;
	width: 18px;
	height: 18px;
	vertical-align: 0;
}

/*
 * b10.636: "Get help" beside a page's heading or in a form, opening the Help
 * page at the right topic.
 */
.occ-help-cta {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 12px;
}

.occ-help-cta--inline {
	display: block;
	margin: 12px 0 0;
}

.occ-apply-popup-help .occ-help-cta--inline {
	text-align: center;
}

/* Doubled class: above `.occ-asg-page a:not(.button)`, which loads later. */
.occ-help-cta > a.occ-help-cta-link.occ-help-cta-link,
.occ-help-cta > a.occ-help-cta-link.occ-help-cta-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	color: var(--occ-ui-text-3);
	text-decoration: none;
}

.occ-help-cta > a.occ-help-cta-link.occ-help-cta-link:is(:hover, :focus) {
	color: var(--occ-ui-text);
	text-decoration: none;
}

/*
 * b10.642: in a page's title, a small pill after its words, so it never
 * competes with a button at the title row's right end (the Clients page).
 * The heading's own size, weight and colour are reset for it. Three classes:
 * above `.occ-asg-page a:not(.button)` (0,2,1), which loads later and at
 * b10.642's two classes painted it burgundy on the Clients page (b10.644).
 */
a.occ-help-cta-link.occ-help-cta-link--title.occ-help-cta-link--title,
a.occ-help-cta-link.occ-help-cta-link--title.occ-help-cta-link--title:visited {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 0 12px;
	padding: 3px 10px 3px 8px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 999px;
	background: var(--occ-ui-fill-soft);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 0;
	color: var(--occ-ui-text-3);
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
}

a.occ-help-cta-link.occ-help-cta-link--title.occ-help-cta-link--title:is(:hover, :focus) {
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text);
	text-decoration: none;
}

a.occ-help-cta-link.occ-help-cta-link--title:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--occ-ui-focus);
}

a.occ-help-cta-link--title i.occ-lucide,
a.occ-help-cta-link--title i.occ-lucide svg {
	width: 15px;
	height: 15px;
}

a.occ-help-cta-link i.occ-lucide {
	display: inline-flex;
	width: 16px;
	height: 16px;
	font-size: 16px;
}

a.occ-help-cta-link i.occ-lucide svg {
	width: 16px;
	height: 16px;
	vertical-align: 0;
}

/*
 * D-385 build 2: the header pull-down (board 8c). A long menu (the agency's)
 * is two columns: the items before the first heading in a row across the
 * top, the groups split so both columns start level, the foot row across
 * the bottom (OCC_Menu_Groups::columns() sets the classes). Grid, placed by
 * column, so each group stays together.
 */
.occ-header-account .inner-top-menu:has(> ul.occ-menu-cols) {
	left: auto;
	right: 0;
	width: max-content;
}

.occ-header-account ul.occ-menu-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	grid-auto-flow: row dense;
	column-gap: 8px;
}

/* Bootstrap's .nav clearfix (::before/::after, display: table) would take the first grid cell. */
.occ-header-account ul.occ-menu-cols::before,
.occ-header-account ul.occ-menu-cols::after {
	display: none;
	content: none;
}

.occ-header-account ul.occ-menu-cols > li.occ-menu-col1 {
	grid-column: 1;
}

.occ-header-account ul.occ-menu-cols > li.occ-menu-col2 {
	grid-column: 2;
}

.occ-header-account ul.occ-menu-cols > li:is(.occ-menu-span, .occ-menu-foot) {
	grid-column: 1 / -1;
}

/*
 * b10.642: a one-column pull-down (a client company's) was 200px, the theme's
 * width, so "Profile, Account, Log out" and the Help icon wrapped, leaving a
 * dot at a line's end. It now takes the width its rows need, from the right
 * edge like the two-column one, and the foot row stays on one line. Seen on
 * MIRROR as Cedar Ridge's owner.
 */
@media (min-width: 992px) {
	.occ-header-account .inner-top-menu:has(> ul.occ-menu-grouped:not(.occ-menu-cols)) {
		left: auto;
		right: 0;
		width: max-content;
		min-width: 200px;
	}

	.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot {
		flex-wrap: nowrap;
	}
}

/* A candidate's profile bar above the pull-down's menu. */
.occ-menu-profile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 4px;
	padding: 8px 14px 12px;
	border-bottom: 1px solid var(--occ-ui-line-soft);
}

.occ-menu-profile-label {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: var(--occ-ui-text-3);
}

.occ-menu-profile-bar {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: var(--occ-ui-line-soft);
	overflow: hidden;
}

.occ-menu-profile-bar > span {
	display: block;
	height: 100%;
	background: var(--occ-ui-blue);
}

/*
 * D-399: the profile bar (sidebar, account pull-down) and the My profile count
 * take the profile prompt's colour for the person's level (D-398): blue, amber,
 * orange, red, and green when nearly or fully complete.
 */
.occ-menu-profile--info .occ-menu-profile-bar > span { background: #2e90fa; }
.occ-menu-profile--caution .occ-menu-profile-bar > span { background: #f79009; }
.occ-menu-profile--warning .occ-menu-profile-bar > span { background: #ef6820; }
.occ-menu-profile--danger .occ-menu-profile-bar > span { background: #f04438; }
.occ-menu-profile--nearly .occ-menu-profile-bar > span,
.occ-menu-profile--complete .occ-menu-profile-bar > span { background: #17b26a; }

.occ-ui-count.occ-ui-count--tone-info { background: #eff8ff; color: #175cd3; }
.occ-ui-count.occ-ui-count--tone-caution { background: #fffaeb; color: #b54708; }
.occ-ui-count.occ-ui-count--tone-warning { background: #fef6ee; color: #b93815; }
.occ-ui-count.occ-ui-count--tone-danger { background: #fef3f2; color: #b42318; }
.occ-ui-count.occ-ui-count--tone-nearly,
.occ-ui-count.occ-ui-count--tone-complete { background: #ecfdf3; color: #067647; }

/* D-388: ProfilePrompts' inline prompt under the sidebar menu, a little tighter. */
.occ-side-prompt {
	margin: 16px 0 0;
}

.occ-side-prompt .occ-pp {
	padding: 14px 16px;
}

/* D-386: the same bar under the name in the sidebar's profile block (candidates). */
.user-short-profile-top .occ-side-profile {
	gap: 4px;
	margin: 8px 0 0;
	padding: 0;
	border-bottom: 0;
}

/*
 * On a phone the theme's user icon opens the same grouped menu. It opens
 * across the whole width under the header, scrolls inside itself, and its
 * rows are 44px for a thumb. The theme's phone header is fixed and 100px
 * tall, so the menu starts at 100px (top: auto put it above the screen,
 * found on b10.616); the theme moves it down a further 10px when it opens.
 */
@media (max-width: 991px) {
	.top-wrapper-menu .inner-top-menu:has(> ul.occ-menu-grouped) {
		position: fixed;
		top: 100px;
		right: 0;
		left: 0;
		width: auto;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		border-radius: 0 0 12px 12px;
		z-index: 1000;
	}

	.top-wrapper-menu .inner-top-menu > ul.occ-menu-grouped {
		display: block;
		width: auto;
		max-height: none;
	}

	.top-wrapper-menu ul.occ-menu-grouped > li:not(.occ-menu-heading, .occ-menu-foot) > a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ------------------------------------------------------------ components
 *
 * For markup written from now on. Existing pages keep their own class names;
 * their stylesheets are rewritten to these tokens instead.
 */

/* A count: 12px, 20px high, grey. */
.occ-ui-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	padding: 0 7px;
	border-radius: 10px;
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text-2);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
}

/* A count on a menu item (the Documents page's new documents, D-378): at the row's end in the sidebar. */
.occ-ui-count--menu {
	margin-left: 8px;
}

ul.menu_short_profile > li > a .occ-ui-count--menu {
	flex: 0 0 auto;
	margin-left: auto;
}

/* Initials: a grey circle, dark letters. 40px; the page sets another size. */
.occ-ui-avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--occ-ui-line-soft);
	color: var(--occ-ui-text-2);
	font-size: 14px;
	font-weight: 600;
}

/*
 * A role or status chip: white, dark text, a coloured dot. The dot is the
 * ::before, coloured by one modifier; --ring draws it hollow (a team member).
 *
 * Build 2 (b10.531): the status families already on the pages are drawn by
 * the same rule, so every state reads the same way wherever it appears.
 * Their own stylesheets keep only layout and set --occ-ui-chip-dot:
 *   occ-access-state    Available, On assignment, Sent, Accepted, Revoked ...
 *   occ-access-flag     Shortlisted, the warning on an invitation
 *   occ-bc-chip         Pending approval, Denied, Your staff, Shortlisted
 *   occ-ct-status       a timesheet's state in the Timesheets list
 *   occ-ct-tag          overtime and holiday hours on a list row
 *   occ-ts-flag         a timesheet flag (No break, Overtime ...)
 *   occ-profile-tab-badge   "3 to fill in" and "optional" on a Profile tab
 *   occ-profile-meter-chip  a missing item under the profile meter (a link)
 *   occ-security-chip   a login's state on Profile > Security
 *   occ-ud-chip         a missing item on the available candidate's dashboard
 */
.occ-ui-chip,
.occ-access-state,
.occ-access-flag,
.occ-bc-chip,
.occ-ct-status,
.occ-ct-tag,
.occ-ts-flag,
.occ-profile-tab-badge,
.occ-profile-meter-chip,
.occ-security-chip,
.occ-ud-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	height: 24px;
	padding: 0 10px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 999px;
	background: var(--occ-ui-white);
	color: var(--occ-ui-text-2);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	vertical-align: middle;
}

.occ-ui-chip::before,
.occ-access-state::before,
.occ-access-flag::before,
.occ-bc-chip::before,
.occ-ct-status::before,
.occ-ct-tag::before,
.occ-ts-flag::before,
.occ-profile-tab-badge::before,
.occ-profile-meter-chip::before,
.occ-security-chip::before,
.occ-ud-chip::before {
	content: "";
	flex: 0 0 8px;
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--occ-ui-chip-dot, var(--occ-ui-dot-grey));
}

.occ-ui-chip.occ-ui-chip--ring::before {
	border: 2px solid var(--occ-ui-chip-dot, var(--occ-ui-dot-grey));
	background: transparent;
}

.occ-ui-chip--green { --occ-ui-chip-dot: var(--occ-ui-dot-green); }
.occ-ui-chip--amber { --occ-ui-chip-dot: var(--occ-ui-dot-amber); }
.occ-ui-chip--red { --occ-ui-chip-dot: var(--occ-ui-dot-red); }
.occ-ui-chip--navy { --occ-ui-chip-dot: var(--occ-ui-dot-navy); }
.occ-ui-chip--grey { --occ-ui-chip-dot: var(--occ-ui-dot-grey); }
.occ-ui-chip--agency { --occ-ui-chip-dot: var(--occ-ui-dot-agency); }
.occ-ui-chip--client { --occ-ui-chip-dot: var(--occ-ui-dot-client); }
.occ-ui-chip--staff { --occ-ui-chip-dot: var(--occ-ui-dot-staff); }

/* ---------------------------------------------------------------- buttons
 *
 * Build 3 (b10.532). Kinds: primary burgundy (one per area), secondary white,
 * quiet; actions with a meaning are green (adds someone), blue (sends or
 * bills), red (removes or stops), solid when it is the main action of its
 * area and soft otherwise. The pages' own button classes keep their sizes and
 * take these colours in their own stylesheets; what is here is the icons.
 *
 * An icon is the ::before of the button, a mask of --occ-ui-icon in the
 * button's text colour; the Font Awesome icons these buttons carried before
 * are gone from their templates. The buttons that carry one:
 *   occ-ct-pdf-link      PDF              download
 *   occ-ct-view          Open             eye
 *   occ-cc-asg-open      Open             eye
 *   occ-ct-yours         Approve or return  clipboard-check
 *   occ-staff-add        Add to my staff  user-plus
 *   occ-staff-remove-button  Remove from my staff  user-x
 *   occ-cc-edit          Edit (a client company)  pencil
 *   occ-cc-bill-toggle   Bill the client  receipt
 *   occ-cc-stop          Deactivate, Stop signing in, Remove  user-x
 *   occ-team-remove      Remove (a team member)  trash
 */
.occ-ct-pdf-link { --occ-ui-icon: var(--occ-ui-icon-download); }
.occ-ct-view,
.occ-cc-asg-open { --occ-ui-icon: var(--occ-ui-icon-eye); }
.occ-ct-yours { --occ-ui-icon: var(--occ-ui-icon-clipboard-check); }
.occ-staff-add { --occ-ui-icon: var(--occ-ui-icon-user-plus); }
.occ-cc-bill-toggle { --occ-ui-icon: var(--occ-ui-icon-receipt); }
.occ-cc-stop,
.occ-staff-remove-button { --occ-ui-icon: var(--occ-ui-icon-user-x); }
.occ-cc-edit { --occ-ui-icon: var(--occ-ui-icon-pencil); }
.occ-team-remove { --occ-ui-icon: var(--occ-ui-icon-trash); }

.occ-ct-pdf-link::before,
.occ-ct-view::before,
.occ-cc-asg-open::before,
.occ-ct-yours::before,
.occ-staff-add::before,
.occ-cc-bill-toggle::before,
.occ-cc-stop::before,
.occ-staff-remove-button::before,
.occ-cc-edit::before,
.occ-team-remove::before {
	content: "";
	display: inline-block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask: var(--occ-ui-icon) center / 16px 16px no-repeat;
	mask: var(--occ-ui-icon) center / 16px 16px no-repeat;
}

/*
 * D-413: a button drawn by OCC_Asg_UI::icon_link() carries its own icon (b10.884
 * made Open such a button), so the mask icon would show a second eye beside it.
 */
.occ-asg-iconbtn.occ-ct-view::before,
.occ-asg-iconbtn.occ-cc-asg-open::before {
	content: none;
	display: none;
}

/* ------------------------------------------------------------ name blocks
 *
 * The company and the person's name, in the sidebar's profile block and the
 * header's account menu: one line each, cut with an ellipsis rather than
 * wrapped (the full name is the title), even spacing, the View Profile
 * button clear of the name (b10.536).
 */
.user-short-profile-top .inner {
	flex: 1 1 auto;
	min-width: 0;
}

.user-short-profile-top .inner .title {
	margin: 0;
	line-height: 24px;
}

.user-short-profile-top .inner .title,
.user-short-profile-top .inner .title a,
.user-short-profile-top .occ-account-person,
.occ-header-account .occ-account-company,
.occ-header-account .occ-account-person {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.user-short-profile-top .occ-account-person {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--occ-ui-text-3);
}

.user-short-profile-top .inner .view-profile {
	margin-top: 10px;
}

.occ-header-account .name-acount {
	line-height: 20px;
}

.occ-header-account .occ-account-company,
.occ-header-account .occ-account-person {
	max-width: 170px;
}

.occ-header-account .occ-account-person {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: var(--occ-ui-text-3);
}

/*
 * b10.682: the theme's back-to-top button (.add-fix-top, fixed 15px from the
 * bottom) sat on the Save button of OCC's sticky save bars on a phone (the
 * profile, Post a job). The bar is always there on those pages and a phone
 * scrolls up with a swipe, so there the button is not drawn.
 */
@media (max-width: 760px) {
	body:has(.occ-profile-actions) .add-fix-top,
	body.occ-job-screen .add-fix-top {
		display: none;
	}
}

/* ------------------------------------------------------------- tips
 * D-411: the question-mark tip, OCC_UI::tip(). Shown on hover and on focus,
 * so a tap opens it on a phone and Tab reaches it; no script.
 */
.occ-tip {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	margin-left: 6px;
	line-height: 1;
}

.occ-tip > button.occ-tip-q {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #98a2b3;
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	color: #475467;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
}

/* A larger target than the mark (44px). */
.occ-tip > button.occ-tip-q::after {
	content: "";
	position: absolute;
	inset: -12px;
}

.occ-tip > button.occ-tip-q:hover,
.occ-tip > button.occ-tip-q:focus-visible {
	border-color: #475467;
	color: #101828;
	outline: none;
	box-shadow: 0 0 0 3px rgba(47, 93, 149, 0.25);
}

.occ-tip-text {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 60;
	width: max-content;
	max-width: min(300px, 80vw);
	padding: 10px 12px;
	border-radius: 8px;
	background: #101828;
	box-shadow: 0 8px 20px rgba(16, 24, 40, 0.25);
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.12s ease;
	pointer-events: none;
}

.occ-tip--end .occ-tip-text {
	left: auto;
	right: -8px;
	transform: none;
}

.occ-tip:hover .occ-tip-text,
.occ-tip:focus-within .occ-tip-text {
	visibility: visible;
	opacity: 1;
}


/*
 * One close button for every OCC window (Philipp, 2026-10-08): a thin X like
 * the login window's, in a round 36px target, no frame. OCC_UI::close_icon().
 */
:is(button, a).occ-ui-x.occ-ui-x {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: #202124;
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

:is(button, a).occ-ui-x.occ-ui-x:hover,
:is(button, a).occ-ui-x.occ-ui-x:focus-visible {
	background: var(--occ-ui-fill, #f2f4f7);
	color: #101828;
	text-decoration: none;
}

:is(button, a).occ-ui-x.occ-ui-x:focus-visible {
	outline: 2px solid var(--occ-ui-blue, #2f5d95);
	outline-offset: 1px;
}

.occ-ui-x svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* ======================================================== set D (D-454)
 *
 * OUR STYLE for buttons and the elements around them (canvas "OCC Style -
 * set D", boards 1D, 2D, 3D, 6D, 7D, 8D). Flat, no shadows or glows, fine
 * lines (#d9dde3), 8px corners (6px small), medium-weight words, 16px line
 * icons, a navy keyboard outline 2px away.
 *
 * -- Why the selectors look like this ----------------------------------------
 *
 * The theme (Bootstrap 3, its own .button) and assignments-frontend.css style
 * every button and link on these pages, up to (0,4,5) for a row's last link.
 * Each element here has ONE rule that sets every property itself, carrying
 * :not(#occ-ui) for an id's weight, so nothing class-based reaches it. That
 * rule reads custom properties; the kinds, sizes and states below only set
 * those properties, at ordinary weight, and the theme never sets them.
 *
 * Markup comes from OCC_UI::button(), button_group() and link() in
 * includes/class-occ-ui.php: our own classes only, never the theme's
 * .button. The email buttons (occ-btn-primary and the like, EmailManager)
 * are a different family; nothing here matches them.
 *
 *   occ-btn                    the base: large 44px, secondary look
 *   occ-btn--primary           burgundy, one per area
 *   occ-btn--secondary         white with a fine line
 *   occ-btn--quiet             text that fills on hover
 *   occ-btn--add/send/remove   solid green, blue, red
 *   occ-btn--soft              with one of those: coloured text only
 *   occ-btn--md / --sm         36px, 32px
 *   occ-btn--icon              icon only, a square; its name in a T2 tooltip
 *   occ-btn--full              full width
 *   occ-btn-group              the joined row group, light until its row is pointed at
 *   occ-btn-split              a main action and its arrow
 *   occ-btn-foot               a form or window foot: stacks on a phone, main button on top
 *   occ-link                   blue words with an arrow
 *   occ-switch / occ-check / occ-choice   switch, tick box, choice (inputs)
 */

.occ-btn {
	--occ-btn-h: 44px;
	--occ-btn-w: auto;
	--occ-btn-px: 18px;
	--occ-btn-gap: 8px;
	--occ-btn-fs: 14px;
	--occ-btn-radius: 8px;
	--occ-btn-bw: 1px;
	--occ-btn-bg: #ffffff;
	--occ-btn-fg: #1d2939;
	--occ-btn-line: #d9dde3;
}

:is(a, button, summary).occ-btn:not(#occ-ui) {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: var(--occ-btn-gap);
	box-sizing: border-box;
	width: var(--occ-btn-w);
	min-width: 0;
	max-width: 100%;
	height: var(--occ-btn-h);
	min-height: 0;
	margin: 0;
	padding: 0 var(--occ-btn-px);
	float: none;
	border-style: solid;
	border-width: var(--occ-btn-bw);
	border-color: var(--occ-btn-line);
	border-radius: var(--occ-btn-radius);
	outline: 0;
	background: var(--occ-btn-bg);
	background-image: none;
	box-shadow: none;
	color: var(--occ-btn-fg);
	font-family: inherit;
	font-size: var(--occ-btn-fs);
	font-style: normal;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	opacity: 1;
	transform: none;
	transition: background-color .12s, border-color .12s, color .12s;
	-webkit-appearance: none;
	appearance: none;
	user-select: none;
}

/* A hidden button stays hidden: the rule above sets display with an id's weight. */
:is(a, button, summary).occ-btn:not(#occ-ui)[hidden] {
	display: none;
}

:is(a, button, summary).occ-btn:not(#occ-ui)::before,
:is(a, button, summary).occ-btn:not(#occ-ui)::after {
	content: none;
	display: none;
}

:is(a, button, summary).occ-btn:not(#occ-ui):focus-visible {
	outline: 2px solid #1e3a5f;
	outline-offset: 2px;
}

:is(a, button, summary).occ-btn:not(#occ-ui) > svg {
	display: block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	color: inherit;
}

:is(a, button, summary).occ-btn:not(#occ-ui) > .occ-btn-text {
	display: inline;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	line-height: 1;
}

/* The count after the words, in a small round bubble. */
:is(a, button, summary).occ-btn:not(#occ-ui) > .occ-btn-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	margin: 0;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--occ-btn-count-bg, #eef0f3);
	color: var(--occ-btn-count-fg, #344054);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

/* -- kinds ---------------------------------------------------------------- */

.occ-btn--primary { --occ-btn-bg: #a41e32; --occ-btn-fg: #ffffff; --occ-btn-line: #a41e32; }
.occ-btn--primary:hover { --occ-btn-bg: #8c1a2b; --occ-btn-line: #8c1a2b; }
.occ-btn--primary:active { --occ-btn-bg: #741524; --occ-btn-line: #741524; }

.occ-btn--secondary { --occ-btn-bg: #ffffff; --occ-btn-fg: #1d2939; --occ-btn-line: #d9dde3; }
.occ-btn--secondary:hover { --occ-btn-bg: #f7f8fa; --occ-btn-line: #b9bfc8; }
.occ-btn--secondary:active { --occ-btn-bg: #eef0f3; }

.occ-btn--quiet { --occ-btn-bg: transparent; --occ-btn-fg: #475467; --occ-btn-line: transparent; }
.occ-btn--quiet:hover { --occ-btn-bg: #f2f4f7; --occ-btn-fg: #101828; }
.occ-btn--quiet:active { --occ-btn-bg: #e8ebef; }

.occ-btn--add { --occ-btn-bg: #067647; --occ-btn-fg: #ffffff; --occ-btn-line: #067647; }
.occ-btn--add:hover { --occ-btn-bg: #05603a; --occ-btn-line: #05603a; }

.occ-btn--send { --occ-btn-bg: #2f5d95; --occ-btn-fg: #ffffff; --occ-btn-line: #2f5d95; }
.occ-btn--send:hover { --occ-btn-bg: #254a78; --occ-btn-line: #254a78; }

/* Solid red only inside an Are you sure? window, as the last step. */
.occ-btn--remove { --occ-btn-bg: #c4271b; --occ-btn-fg: #ffffff; --occ-btn-line: #c4271b; }
.occ-btn--remove:hover { --occ-btn-bg: #a51f15; --occ-btn-line: #a51f15; }

.occ-btn--primary,
.occ-btn--add,
.occ-btn--send,
.occ-btn--remove {
	--occ-btn-count-bg: rgba(255, 255, 255, .2);
	--occ-btn-count-fg: #ffffff;
}

/* Soft: coloured text only, in lists and beside a primary. */
.occ-btn--soft { --occ-btn-bg: transparent; --occ-btn-line: transparent; --occ-btn-count-bg: #eef0f3; --occ-btn-count-fg: #344054; }
.occ-btn--add.occ-btn--soft { --occ-btn-fg: #067647; }
.occ-btn--add.occ-btn--soft:hover { --occ-btn-bg: #ecfdf3; --occ-btn-line: transparent; }
.occ-btn--send.occ-btn--soft { --occ-btn-fg: #2f5d95; }
.occ-btn--send.occ-btn--soft:hover { --occ-btn-bg: #eef4fb; --occ-btn-line: transparent; }
.occ-btn--remove.occ-btn--soft { --occ-btn-fg: #b42318; }
.occ-btn--remove.occ-btn--soft:hover { --occ-btn-bg: #fef3f2; --occ-btn-line: transparent; }

/* Turned off, and working (aria-busy). */
.occ-btn.occ-btn:is(:disabled, [aria-disabled="true"]) {
	--occ-btn-bg: #f2f4f7;
	--occ-btn-fg: #98a2b3;
	--occ-btn-line: transparent;
	cursor: not-allowed;
}

:is(a, button, summary).occ-btn:not(#occ-ui):is(:disabled, [aria-disabled="true"]) {
	cursor: not-allowed;
}

.occ-btn.occ-btn:is(.occ-btn--quiet, .occ-btn--soft):is(:disabled, [aria-disabled="true"]) {
	--occ-btn-bg: transparent;
}

:is(a, button, summary).occ-btn:not(#occ-ui)[aria-busy="true"] {
	cursor: progress;
}

/* -- sizes and shapes ------------------------------------------------------ */

.occ-btn--md { --occ-btn-h: 36px; --occ-btn-px: 14px; --occ-btn-gap: 6px; }
.occ-btn--sm { --occ-btn-h: 32px; --occ-btn-px: 10px; --occ-btn-gap: 6px; --occ-btn-fs: 13px; --occ-btn-radius: 6px; }
.occ-btn--icon { --occ-btn-px: 0; --occ-btn-w: var(--occ-btn-h); }
.occ-btn--full { --occ-btn-w: 100%; }

/*
 * The icon-only button's name: tooltip T2 (Philipp: "i like the T2"), white
 * with a fine line and a small pointer, 6px below, on hover and on keyboard
 * focus. The button's aria-label is what a screen reader reads.
 */
:is(a, button, summary).occ-btn:not(#occ-ui) > .occ-btn-tip {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	z-index: 60;
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid #d9dde3;
	border-radius: 6px;
	background: #ffffff;
	box-shadow: none;
	color: #1d2939;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s;
}

:is(a, button, summary).occ-btn:not(#occ-ui) > .occ-btn-tip::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	border-top: 1px solid #d9dde3;
	border-left: 1px solid #d9dde3;
	background: #ffffff;
	transform: translateX(-50%) rotate(45deg);
}

:is(a, button, summary).occ-btn:not(#occ-ui):is(:hover, :focus-visible) > .occ-btn-tip {
	visibility: visible;
	opacity: 1;
}

/* -- the joined row group -------------------------------------------------- */

/*
 * Download, Edit, More as one piece with fine dividers. Light until its row
 * (a table row, a list item, or anything marked occ-btn-row) is pointed at
 * or reached with Tab; firm all the time on a touch screen.
 */
.occ-btn-group {
	--occ-btn-group-line: #eaecf0;
	--occ-btn-group-text: #667085;
	display: inline-flex;
	align-items: stretch;
	box-sizing: border-box;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--occ-btn-group-line);
	border-radius: 6px;
	background: #ffffff;
	vertical-align: middle;
	transition: border-color .12s;
}

:is(tr, li, .occ-btn-row):is(:hover, :focus-within) .occ-btn-group,
.occ-btn-group:is(:hover, :focus-within) {
	--occ-btn-group-line: #d9dde3;
	--occ-btn-group-text: #344054;
}

@media (hover: none) {
	.occ-btn-group {
		--occ-btn-group-line: #d9dde3;
		--occ-btn-group-text: #344054;
	}
}

.occ-btn-group > .occ-btn {
	--occ-btn-h: 30px;
	--occ-btn-px: 10px;
	--occ-btn-bw: 0 0 0 1px;
	--occ-btn-radius: 0;
	--occ-btn-bg: transparent;
	--occ-btn-fg: var(--occ-btn-group-text);
	--occ-btn-line: var(--occ-btn-group-line);
}

.occ-btn-group > .occ-btn--icon {
	--occ-btn-px: 0;
	--occ-btn-w: 32px;
}

.occ-btn-group > .occ-btn:hover {
	--occ-btn-bg: #f7f8fa;
	--occ-btn-fg: #101828;
	--occ-btn-line: var(--occ-btn-group-line);
}

.occ-btn-group > .occ-btn:first-child { --occ-btn-bw: 0; --occ-btn-radius: 5px 0 0 5px; }
.occ-btn-group > .occ-btn:last-child { --occ-btn-radius: 0 5px 5px 0; }
.occ-btn-group > .occ-btn:only-child { --occ-btn-radius: 5px; }

.occ-btn-group > :is(a, button, summary).occ-btn:not(#occ-ui):focus-visible {
	z-index: 1;
	outline-offset: -2px;
}

/* -- More: the three dots and their menu (b10.1077) ------------------------- */

/*
 * OCC_UI::more_menu(): a details element, so it opens without script. In a
 * row group it is the group's last part; on its own a 44px square like a
 * secondary icon button. The menu opens under it, right-aligned, with a fine
 * line and no shadow; a red item (Remove, End) sits after a line.
 */
details.occ-more:not(#occ-ui) {
	position: relative;
	display: inline-flex;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

details.occ-more:not(#occ-ui) > summary.occ-more-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: background-color .12s, border-color .12s, color .12s;
}

details.occ-more:not(#occ-ui) > summary.occ-more-btn::-webkit-details-marker {
	display: none;
}

details.occ-more:not(#occ-ui) > summary.occ-more-btn::before,
details.occ-more:not(#occ-ui) > summary.occ-more-btn::after {
	content: none;
	display: none;
}

details.occ-more:not(#occ-ui) > summary.occ-more-btn:focus-visible {
	z-index: 1;
	outline: 2px solid #1e3a5f;
	outline-offset: -2px;
}

details.occ-more:not(#occ-ui) > summary.occ-more-btn .occ-btn-ico {
	width: 16px;
	height: 16px;
	flex: none;
}

/* In a row group: the last part, 32px square, the group's line before it. */
.occ-btn-group > details.occ-more:not(#occ-ui) > summary.occ-more-btn {
	width: 32px;
	height: 30px;
	border-left: 1px solid var(--occ-btn-group-line);
	border-radius: 0 5px 5px 0;
	color: var(--occ-btn-group-text);
}

.occ-btn-group > details.occ-more:not(#occ-ui):only-child > summary.occ-more-btn {
	border-left: 0;
	border-radius: 5px;
}

.occ-btn-group > details.occ-more:not(#occ-ui) > summary.occ-more-btn:hover,
.occ-btn-group > details.occ-more:not(#occ-ui)[open] > summary.occ-more-btn {
	background: #f7f8fa;
	color: #101828;
}

/* On its own: a secondary 44px square. */
details.occ-more--lg:not(#occ-ui) > summary.occ-more-btn {
	width: 44px;
	height: 44px;
	border: 1px solid #d9dde3;
	border-radius: 8px;
	background: #ffffff;
	color: #1d2939;
}

details.occ-more--lg:not(#occ-ui) > summary.occ-more-btn:hover,
details.occ-more--lg:not(#occ-ui)[open] > summary.occ-more-btn {
	border-color: #b9bfc8;
	background: #f7f8fa;
}

details.occ-more:not(#occ-ui) > summary.occ-more-btn > .occ-btn-tip {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	z-index: 60;
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid #d9dde3;
	border-radius: 6px;
	background: #ffffff;
	color: #1d2939;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s;
}

details.occ-more:not(#occ-ui) > summary.occ-more-btn > .occ-btn-tip::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	border-top: 1px solid #d9dde3;
	border-left: 1px solid #d9dde3;
	background: #ffffff;
	transform: translateX(-50%) rotate(45deg);
}

details.occ-more:not(#occ-ui):not([open]) > summary.occ-more-btn:is(:hover, :focus-visible) > .occ-btn-tip {
	visibility: visible;
	opacity: 1;
}

details.occ-more:not(#occ-ui) > .occ-more-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: -1px;
	z-index: 70;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	/* b10.1097 (Philipp, 2026-10-11: "the more menu appears a bit wide"): as wide as its longest item, at least 160px. */
	width: max-content;
	min-width: 160px;
	max-width: min(300px, calc(100vw - 32px));
	margin: 0;
	padding: 4px;
	border: 1px solid #d9dde3;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: none;
	text-align: left;
}

details.occ-more:not(#occ-ui) .occ-more-item {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	color: #344054;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

details.occ-more:not(#occ-ui) .occ-more-item::before,
details.occ-more:not(#occ-ui) .occ-more-item::after {
	content: none;
	display: none;
}

details.occ-more:not(#occ-ui) .occ-more-item .occ-btn-ico {
	width: 16px;
	height: 16px;
	flex: none;
}

details.occ-more:not(#occ-ui) .occ-more-item:is(:hover, :focus-visible) {
	background: #f2f4f7;
	color: #101828;
	text-decoration: none;
}

details.occ-more:not(#occ-ui) .occ-more-item:focus-visible {
	outline: 2px solid #1e3a5f;
	outline-offset: -2px;
}

details.occ-more:not(#occ-ui) .occ-more-item.is-remove,
details.occ-more:not(#occ-ui) .occ-more-item.is-remove:is(:hover, :focus-visible) {
	color: #b42318;
}

details.occ-more:not(#occ-ui) .occ-more-line {
	display: block;
	height: 1px;
	margin: 4px 6px;
	background: #eaecf0;
}

/* -- split button ---------------------------------------------------------- */

.occ-btn-split {
	display: inline-flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

.occ-btn-split > .occ-btn:first-child { --occ-btn-radius: 8px 0 0 8px; }

.occ-btn-split > .occ-btn:last-child {
	--occ-btn-radius: 0 8px 8px 0;
	--occ-btn-bw: 0 0 0 1px;
	--occ-btn-line: rgba(255, 255, 255, .28);
	--occ-btn-px: 12px;
}

/* -- a form or window foot ------------------------------------------------- */

.occ-btn-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* Under 600px wide: full width, one under the other, the main button on top. */
@media (max-width: 600px) {
	.occ-btn-foot {
		flex-direction: column;
		align-items: stretch;
	}

	.occ-btn-foot > .occ-btn {
		--occ-btn-w: 100%;
		--occ-btn-h: 44px;
	}

	.occ-btn-foot > .occ-btn--primary {
		order: -1;
	}
}

/* -- text link ------------------------------------------------------------- */

a.occ-link:not(#occ-ui) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: #2f5d95;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	text-transform: none;
}

a.occ-link:not(#occ-ui):hover {
	color: #1e3a5f;
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.occ-link:not(#occ-ui):focus-visible {
	outline: 2px solid #1e3a5f;
	outline-offset: 2px;
}

a.occ-link:not(#occ-ui)::before,
a.occ-link:not(#occ-ui)::after {
	content: none;
	display: none;
}

a.occ-link:not(#occ-ui) > svg {
	display: block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

/* -- switch, tick box, choice (board 7D, 8D) ------------------------------- */

/*
 * On the inputs themselves, so a form works without script. A switch is green
 * when on and soft grey when off (Philipp: "i like the green for on, and soft
 * gray for off") and acts at once; tick boxes and choices are navy and wait
 * for Save. Error: aria-invalid, a red line (and a red sentence under it).
 */
input[type="checkbox"].occ-switch:not(#occ-ui) {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 40px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 1px solid #d9dde3;
	border-radius: 999px;
	outline: 0;
	background: #eef0f3;
	box-shadow: none;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color .12s, border-color .12s;
	-webkit-appearance: none;
	appearance: none;
}

input[type="checkbox"].occ-switch:not(#occ-ui)::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 1px solid #d0d5dd;
	border-radius: 50%;
	background: #ffffff;
	transition: transform .12s, border-color .12s;
}

input[type="checkbox"].occ-switch:not(#occ-ui):hover {
	border-color: #b9bfc8;
}

input[type="checkbox"].occ-switch:not(#occ-ui):checked {
	border-color: #079455;
	background: #079455;
}

input[type="checkbox"].occ-switch:not(#occ-ui):checked:hover {
	border-color: #067647;
	background: #067647;
}

input[type="checkbox"].occ-switch:not(#occ-ui):checked::before {
	border-color: #ffffff;
	transform: translateX(18px);
}

:is(input[type="checkbox"].occ-check, input[type="radio"].occ-choice):not(#occ-ui) {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 1.5px solid #98a2b3;
	border-radius: 4px;
	outline: 0;
	background: #ffffff no-repeat center;
	box-shadow: none;
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

input[type="radio"].occ-choice:not(#occ-ui) {
	border-radius: 50%;
}

input[type="checkbox"].occ-check:not(#occ-ui):checked {
	border-color: #2f5d95;
	background-color: #2f5d95;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 12px 12px;
}

input[type="checkbox"].occ-check:not(#occ-ui):indeterminate {
	border-color: #2f5d95;
	background-color: #2f5d95;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
	background-size: 12px 12px;
}

input[type="radio"].occ-choice:not(#occ-ui):checked {
	border-color: #2f5d95;
	background-image: radial-gradient(circle, #2f5d95 0 4px, transparent 4.5px);
}

:is(input[type="checkbox"].occ-check, input[type="radio"].occ-choice):not(#occ-ui):disabled {
	border-color: #d0d5dd;
	background-color: #f2f4f7;
	cursor: not-allowed;
}

input[type="checkbox"].occ-check:not(#occ-ui):checked:disabled {
	border-color: #b9c6d8;
	background-color: #b9c6d8;
}

:is(input[type="checkbox"].occ-check, input[type="radio"].occ-choice):not(#occ-ui)[aria-invalid="true"] {
	border-color: #d92d20;
}

:is(input[type="checkbox"].occ-switch, input[type="checkbox"].occ-check, input[type="radio"].occ-choice):not(#occ-ui):focus-visible {
	outline: 2px solid #1e3a5f;
	outline-offset: 2px;
}

/*
 * b10.1085: on a phone a help bubble shows as a bar above the screen's foot.
 * Hidden or not, an absolutely placed bubble beside a "?" near the right edge
 * still counted towards the page's width, and the page scrolled sideways
 * (Assignments, "One assignment at a time for each person").
 */
@media (max-width: 640px) {
	.occ-tip-text,
	.occ-tip--end .occ-tip-text {
		position: fixed;
		top: auto;
		right: 16px;
		bottom: 16px;
		left: 16px;
		width: auto;
		max-width: none;
		transform: none;
	}
}

/*
 * b10.1088: More filters, one shape for every list with the shared filter
 * block (Browse Candidates' `.occ-bc-more`, D-445; Temporary Staff, Clients and
 * Inquiries, canvas "OCC Temporary Staff in Set D", board 6). A disclosure: the
 * extra fields and Apply open under the list's other filters.
 */
.occ-filter-more {
	background: var(--occ-ui-white);
	border: 1px solid var(--occ-ui-line);
	border-radius: 10px;
}

.occ-filter-more > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	box-sizing: border-box;
	font-size: 13px;
	font-weight: 600;
	color: var(--occ-ui-text);
	cursor: pointer;
	list-style: none;
}

.occ-filter-more > summary::-webkit-details-marker {
	display: none;
}

.occ-filter-more-label {
	flex: 1 1 auto;
}

.occ-filter-more-on {
	font-weight: 500;
	color: var(--occ-ui-brand);
}

.occ-filter-more > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin: -4px 2px 0;
	border-right: 2px solid #5f6368;
	border-bottom: 2px solid #5f6368;
	transform: rotate(45deg);
	transition: transform .15s;
}

.occ-filter-more[open] > summary::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.occ-filter-more-form {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 2px 12px 12px;
}

.occ-filter-more-form label {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #3c4043;
}

.occ-filter-more-form :is(input, select):not(#occ-ui) {
	width: 100%;
	max-width: none;
	height: var(--occ-ui-field-h-sm, 40px);
	box-sizing: border-box;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--occ-ui-field-border);
	border-radius: var(--occ-ui-field-radius, 8px);
	background-color: var(--occ-ui-white);
	font-size: 14px;
	color: var(--occ-ui-field-text, #101828);
}

.occ-filter-more-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
}

/* b10.1097: on a phone a More menu is at least 200px wide and its items are 44px tall, to tap. */
@media (max-width: 640px) {
	details.occ-more:not(#occ-ui) > .occ-more-menu {
		min-width: 200px;
	}

	details.occ-more:not(#occ-ui) .occ-more-item {
		min-height: 44px;
	}
}

/* -- Back to the list on a phone (b10.1108) ---------------------------------
 * Canvas "OCC Back to the List on a Phone". occ-ui.js marks a list-and-detail
 * card (.occ-staff) occ-split, and is-open while a client or a person was
 * opened from its list. Where the two stack (900px and under) the opened one
 * shows alone under a bar that stays below the site's header: Back with the
 * list's name, and whose page it is. Applications' own panel uses the same bar.
 * Wider screens never see the bar.
 */
.occ-split-bar {
	display: none;
}

@media (max-width: 900px) {
	.occ-split.is-open > .occ-staff-nav:not(#occ-ui),
	.occ-split:not(.is-open) > .occ-staff-detail:not(#occ-ui) {
		display: none;
	}

	.occ-split.is-open > .occ-staff-detail > .occ-split-bar,
	.occ-apps.has-panel .occ-split-bar {
		position: sticky;
		top: var(--occ-split-top, 0px);
		z-index: 20;
		display: flex;
		align-items: center;
		gap: 10px;
		box-sizing: border-box;
		margin: 0;
		padding: 8px 12px;
		border-bottom: 1px solid #eaecf0;
		border-radius: 12px 12px 0 0;
		background: #ffffff;
		box-shadow: 0 2px 6px rgba(16, 24, 40, .06);
	}

	.occ-split-bar :is(a, button).occ-split-back:not(#occ-ui) {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 6px;
		box-sizing: border-box;
		height: 44px;
		margin: 0;
		padding: 0 14px 0 8px;
		border: 1px solid #d0d5dd;
		border-radius: 8px;
		background: #ffffff;
		color: #344054;
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		text-decoration: none;
		cursor: pointer;
	}

	.occ-split-bar :is(a, button).occ-split-back:not(#occ-ui):is(:hover, :focus-visible) {
		background: #f9fafb;
		color: #101828;
	}

	.occ-split-bar .occ-split-who {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		color: #475467;
		font-size: 14px;
		font-weight: 600;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The old in-page "Back to the list" link (b10.1086) gives way to the bar. */
	.occ-split a.occ-staff-back:not(#occ-ui) {
		display: none;
	}
}

/* -- How it works (b10.1128) ------------------------------------------------
 * Canvas "OCC Templates and Assignments: How It Works", boards 2 and 3. The
 * same closed card as Applications' (frontend-how.php, occ-apps-how), shared
 * here for Document Center > Templates and Assignments: a route map drawn at
 * 880 by 360 (each stop placed by the template), the same route as a numbered
 * list on a narrow screen, a legend, and tables.
 * ---------------------------------------------------------------------- */

details.occ-how {
	box-sizing: border-box;
	margin-top: 16px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
	color: #344054;
	font-size: 14px;
}

details.occ-how > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
}

details.occ-how > summary::-webkit-details-marker {
	display: none;
}

details.occ-how > summary:focus-visible {
	outline: 2px solid #2f5d95;
	outline-offset: -2px;
	border-radius: 12px;
}

.occ-how-q {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f2f4f7;
	color: #344054;
	font-weight: 600;
}

.occ-how-words {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.occ-how-words strong {
	color: #101828;
	font-size: 16px;
	font-weight: 600;
}

.occ-how-words span {
	color: #667085;
	font-size: 13px;
}

.occ-how-chev {
	width: 9px;
	height: 9px;
	border-right: 2px solid #475467;
	border-bottom: 2px solid #475467;
	transform: rotate(45deg);
}

details.occ-how[open] .occ-how-chev {
	transform: rotate(-135deg);
}

.occ-how-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	border-top: 1px solid #eaecf0;
}

.occ-how-body p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}

.occ-how-lead-list {
	display: none;
}

.occ-how-first {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid #cddcf0;
	border-radius: 12px;
	background: #f5f8fc;
}

.occ-how-first > strong {
	color: #1e3a5f;
	font-size: 15px;
	font-weight: 600;
}

.occ-how-first ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-how-first li {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	background: #ffffff;
	font-size: 13px;
	line-height: 1.45;
}

.occ-how-first li::before {
	display: none;
}

.occ-how-first li strong {
	display: block;
	margin-bottom: 2px;
	color: #101828;
	font-weight: 600;
}

/* The route map. */
.occ-how-route {
	position: relative;
	width: 880px;
	max-width: 100%;
	height: 360px;
	margin: 18px auto 0;
}

.occ-how-route > span {
	position: absolute;
	box-sizing: border-box;
}

.occ-how-route .occ-how-rl {
	border-radius: 4px;
	background: #d0d5dd;
}

.occ-how-route .occ-how-rl.is-yes {
	background: #12b76a;
}

.occ-how-route .occ-how-rb {
	border-left: 3px dashed #2f5d95;
}

.occ-how-route .occ-how-rb.is-h {
	border-left: 0;
	border-top: 3px dashed #2f5d95;
}

.occ-how-route .occ-how-rarrow {
	width: 0;
	height: 0;
	border-top: 10px solid #2f5d95;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}

.occ-how-route .occ-how-rpill {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: 1px solid #cddcf0;
	border-radius: 999px;
	background: #eef4fb;
	color: #1e3a5f;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.occ-how-route .occ-how-rstop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.occ-how-rstop strong,
.occ-how-roff strong {
	color: #101828;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.occ-how-rstop small,
.occ-how-roff small {
	display: block;
	color: #475467;
	font-size: 12px;
	line-height: 1.4;
}

.occ-how-rc {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 4px solid #2f5d95;
	border-radius: 50%;
	background: #eef4fb;
	color: #2f5d95;
}

.occ-how-rc svg {
	flex: none;
}

.occ-how-rc.is-grey {
	border-color: #98a2b3;
	background: #f2f4f7;
	color: #475467;
}

.occ-how-rc.is-wait {
	border-style: dashed;
	border-color: #98a2b3;
	background: #ffffff;
	color: #475467;
}

.occ-how-rc.is-green {
	border-color: #12b76a;
	background: #ecfdf3;
	color: #067647;
}

.occ-how-rc.is-amber {
	border-color: #dc9c00;
	background: #fffaeb;
	color: #b54708;
}

.occ-how-rc.is-purple {
	border-color: #7a5af8;
	background: #f4f3ff;
	color: #5925dc;
}

.occ-how-rc.is-done {
	border-color: #12b76a;
	background: #ffffff;
	color: #067647;
}

.occ-how-rc.is-red {
	border-width: 3px;
	border-color: #d92d20;
	background: #fef3f2;
	color: #b42318;
}

.occ-how-route .occ-how-roff {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 2px dashed #d0d5dd;
	border-radius: 14px;
	background: #ffffff;
}

.occ-how-route .occ-how-roff.is-red {
	border-color: #fda29b;
	background: #fffbfa;
}

.occ-how-roff.is-red strong {
	color: #b42318;
}

.occ-how-route .occ-how-rloop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	border: 1px solid #cddcf0;
	border-radius: 14px;
	background: #f5f8fc;
	font-size: 12px;
}

.occ-how-rloop > strong {
	flex: 1 1 100%;
	color: #1e3a5f;
	font-size: 12px;
	font-weight: 600;
}

.occ-how-rloop > span {
	padding: 3px 9px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid #cddcf0;
	color: #1e3a5f;
	font-weight: 600;
	white-space: nowrap;
}

/* The same route as a list. */
ol.occ-how-list {
	display: none;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

ol.occ-how-list > li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
}

ol.occ-how-list > li::before {
	display: none;
}

ol.occ-how-list .occ-how-rc {
	width: 40px;
	height: 40px;
	border-width: 3px;
}

ol.occ-how-list > li.is-off {
	padding: 8px;
	border: 2px dashed #d0d5dd;
	border-radius: 12px;
}

ol.occ-how-list > li.is-red {
	padding: 8px;
	border: 2px dashed #fda29b;
	border-radius: 12px;
	background: #fffbfa;
}

.occ-how-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	padding-top: 12px;
	border-top: 1px solid #eaecf0;
	color: #475467;
	font-size: 13px;
}

.occ-how-legend > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.occ-how-legend .occ-how-legend-end {
	margin-left: auto;
}

.occ-how-key {
	width: 28px;
	height: 6px;
	border-radius: 3px;
	background: #d0d5dd;
}

.occ-how-key.is-yes {
	background: #12b76a;
}

.occ-how-key.is-back {
	height: 0;
	border-top: 3px dashed #2f5d95;
	border-radius: 0;
	background: none;
}

.occ-how-key.is-off {
	height: 10px;
	border: 2px dashed #d0d5dd;
	background: none;
}

.occ-how-body h4.occ-how-sub {
	margin: 6px 0 0;
	color: #101828;
	font-size: 14px;
	font-weight: 600;
}

.occ-how-table {
	overflow: hidden;
	border: 1px solid #eaecf0;
	border-radius: 10px;
	font-size: 13px;
}

.occ-how-tr {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr) 220px 150px;
	gap: 12px;
	padding: 9px 14px;
	border-top: 1px solid #f2f4f7;
	line-height: 1.45;
}

.occ-how-tr.is-head {
	border-top: 0;
	background: #f9fafb;
	color: #667085;
	font-size: 12px;
}

.occ-how-tr strong {
	color: #101828;
	font-weight: 600;
}

.occ-how-tr.is-red {
	background: #fffbfa;
}

.occ-how-tr.is-red strong {
	color: #b42318;
}

@media (max-width: 1023px) {
	.occ-how-route,
	.occ-how-lead-map,
	.occ-how-legend {
		display: none;
	}

	.occ-how-lead-list {
		display: block;
	}

	ol.occ-how-list {
		display: flex;
	}

	.occ-how-first ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.occ-how-tr {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.occ-how-tr.is-head {
		display: none;
	}

	.occ-how-tr span[data-label]::before {
		content: attr(data-label) ": ";
		color: #667085;
	}
}

/*
 * D-459 item 65 (b10.1135): video walkthroughs. Canvas "OSS Video
 * Walkthroughs": the Watch pill beside Get help in a page's title, its list
 * when a page has several, the dashboard's row (one video) or list (several),
 * and the window that plays them. Three classes on the links: above
 * `.occ-asg-page a:not(.button)` (0,2,1), which loads later.
 */
.occ-hcv-dot {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--occ-ui-brand);
	color: #fff;
}

.occ-hcv-dot svg {
	width: 9px;
	height: 9px;
	margin-left: 1px;
}

a.occ-hcv-pill.occ-hcv-pill.occ-hcv-pill,
a.occ-hcv-pill.occ-hcv-pill.occ-hcv-pill:visited,
summary.occ-hcv-pill.occ-hcv-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 0 6px;
	padding: 3px 10px 3px 4px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 999px;
	background: var(--occ-ui-fill-soft);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 0;
	color: var(--occ-ui-text-3);
	text-decoration: none;
	text-transform: none;
	vertical-align: middle;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}

summary.occ-hcv-pill::-webkit-details-marker {
	display: none;
}

a.occ-hcv-pill.occ-hcv-pill.occ-hcv-pill:is(:hover, :focus),
summary.occ-hcv-pill.occ-hcv-pill:is(:hover, :focus) {
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text);
	text-decoration: none;
}

a.occ-hcv-pill:focus-visible,
summary.occ-hcv-pill:focus-visible,
a.occ-hcv-item:focus-visible,
button.occ-hcv-item:focus-visible,
a.occ-hcv-thumb:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--occ-ui-focus);
}

.occ-hcv-pill .occ-hcv-len {
	color: var(--occ-ui-muted);
	font-weight: 400;
}

.occ-hcv-pill .occ-hcv-len::before {
	content: "\00b7";
	margin-right: 6px;
}

.occ-hcv-caret {
	flex: none;
	transition: transform .15s ease;
}

details.occ-hcv-menu[open] .occ-hcv-caret {
	transform: rotate(180deg);
}

/* In a title: keep the heading's size and weight out of the list. */
details.occ-hcv-menu {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
}

details.occ-hcv-menu > .occ-hcv-list {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 6px;
	display: block;
	width: max-content;
	min-width: 280px;
	max-width: min(380px, calc(100vw - 32px));
	padding: 6px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 24px -6px rgba(16, 24, 40, .18), 0 2px 4px rgba(16, 24, 40, .06);
}

a.occ-hcv-item.occ-hcv-item.occ-hcv-item,
a.occ-hcv-item.occ-hcv-item.occ-hcv-item:visited,
button.occ-hcv-item.occ-hcv-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--occ-ui-text);
	text-align: left;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
}

a.occ-hcv-item.occ-hcv-item.occ-hcv-item:is(:hover, :focus),
button.occ-hcv-item.occ-hcv-item:is(:hover, :focus) {
	background: var(--occ-ui-fill-soft);
	color: var(--occ-ui-text);
	text-decoration: none;
}

.occ-hcv-item .occ-hcv-dot {
	width: 26px;
	height: 26px;
}

.occ-hcv-item .occ-hcv-dot svg {
	width: 11px;
	height: 11px;
	margin-left: 2px;
}

.occ-hcv-item .occ-hcv-t {
	flex: 1 1 auto;
	min-width: 0;
}

.occ-hcv-item .occ-hcv-len {
	flex: none;
	font-size: 12px;
	font-weight: 400;
	color: var(--occ-ui-muted);
	font-variant-numeric: tabular-nums;
}

/* The dashboard, one video: a small row with its picture. */
.occ-hcv-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	margin: 0 0 30px;
	padding: 12px 14px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

a.occ-hcv-thumb.occ-hcv-thumb.occ-hcv-thumb {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 144px;
	height: 81px;
	overflow: hidden;
	border: 1px solid var(--occ-ui-line);
	border-radius: 8px;
	background: var(--occ-ui-navy);
	text-decoration: none;
}

.occ-hcv-thumb img,
.occ-hcv-thumb video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.occ-hcv-thumb .occ-hcv-shade {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, .28);
	transition: background .15s ease;
}

a.occ-hcv-thumb:hover .occ-hcv-shade {
	background: rgba(16, 24, 40, .4);
}

.occ-hcv-thumb .occ-hcv-play {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: var(--occ-ui-brand);
	box-shadow: 0 2px 6px rgba(16, 24, 40, .3);
}

.occ-hcv-thumb .occ-hcv-play svg {
	margin-left: 2px;
}

.occ-hcv-thumb .occ-hcv-badge {
	position: absolute;
	right: 6px;
	bottom: 5px;
	padding: 1px 5px;
	border-radius: 4px;
	background: rgba(16, 24, 40, .75);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

.occ-hcv-text {
	display: flex;
	flex: 1 1 260px;
	flex-direction: column;
	min-width: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--occ-ui-text-3);
}

.occ-hcv-text .occ-hcv-kicker {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--occ-ui-brand);
}

.occ-hcv-text strong {
	font-size: 15px;
	font-weight: 600;
	color: var(--occ-ui-text);
}

a.occ-btn.occ-btn--primary.occ-hcv-watch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

/* The dashboard, several videos: their titles. */
.occ-hcv-box {
	max-width: 420px;
	margin: 0 0 30px;
	padding: 14px 12px 8px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.occ-hcv-box > h3 {
	margin: 0;
	padding: 0 10px 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--occ-ui-text);
}

/* The window. */
dialog.occ-hcv-dialog {
	width: calc(100% - 32px);
	max-width: 880px;
	max-height: calc(100% - 48px);
	margin: 48px auto auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .35);
	color: var(--occ-ui-text);
	font-size: 14px;
	line-height: 1.45;
}

dialog.occ-hcv-dialog::backdrop {
	background: rgba(16, 24, 40, .6);
}

.occ-hcv-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--occ-ui-line-soft);
}

.occ-hcv-head > div {
	flex: 1 1 auto;
	min-width: 0;
}

.occ-hcv-head h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--occ-ui-text);
}

.occ-hcv-head .occ-hcv-sub {
	margin: 0;
	font-size: 13px;
	color: var(--occ-ui-text-3);
}

.occ-hcv-head .occ-hcv-sub:empty {
	display: none;
}

button.occ-hcv-close.occ-hcv-close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--occ-ui-border);
	border-radius: 8px;
	background: #fff;
	color: var(--occ-ui-text);
	cursor: pointer;
}

button.occ-hcv-close.occ-hcv-close:is(:hover, :focus) {
	background: var(--occ-ui-fill);
}

.occ-hcv-stage {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #0b1726;
}

.occ-hcv-stage iframe,
.occ-hcv-stage video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.occ-hcv-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	padding: 18px 20px 20px;
}

.occ-hcv-foot .occ-hcv-desc {
	flex: 1 1 340px;
	margin: 0;
	color: var(--occ-ui-text-2, #344054);
}

.occ-hcv-foot .occ-hcv-desc:empty {
	display: none;
}

.occ-hcv-more {
	flex: 1 1 260px;
	min-width: 0;
}

.occ-hcv-more[hidden] {
	display: none !important;
}

.occ-hcv-more .occ-hcv-more-h {
	margin: 0;
	padding: 0 10px 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--occ-ui-text-3);
}

@media (max-width: 600px) {
	details.occ-hcv-menu > .occ-hcv-list {
		left: auto;
		right: 0;
	}

	a.occ-hcv-thumb.occ-hcv-thumb.occ-hcv-thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.occ-hcv-row a.occ-btn.occ-btn--primary.occ-hcv-watch {
		width: 100%;
		justify-content: center;
	}

	dialog.occ-hcv-dialog {
		width: calc(100% - 16px);
		margin-top: 16px;
		max-height: calc(100% - 32px);
	}

	.occ-hcv-head,
	.occ-hcv-foot {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* b10.1150: the Help page's Videos section, every video for the person's group (canvas "OCC Candidate Videos and Delete Account", board 6). */
.occ-hcv-help .occ-hcv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
	margin-top: 14px;
}

a.occ-hcv-card.occ-hcv-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	color: var(--occ-ui-text);
	text-decoration: none;
}

.occ-hcv-card .occ-hcv-thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--occ-ui-line);
	border-radius: 8px;
	background: var(--occ-ui-navy);
}

a.occ-hcv-card:hover .occ-hcv-shade {
	background: rgba(16, 24, 40, .4);
}

a.occ-hcv-card:focus-visible {
	outline: 0;
	border-radius: 8px;
	box-shadow: 0 0 0 3px var(--occ-ui-focus);
}

.occ-hcv-card .occ-hcv-card-t {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.occ-hcv-card .occ-hcv-card-d {
	font-size: 13px;
	line-height: 1.45;
	color: var(--occ-ui-text-3);
}

/* =====================================================================
 * D-462 (b10.1164): notices in set D, board 13D ("The four notices").
 * Philipp, 2026-10-15: the notices "don't feel like they match the site".
 * Info, success, warning, error: a fine line all round, a light fill, an
 * 18px mark at the left, 14px text; never a coloured left edge or a shadow.
 * New notices use OCC_UI::notice() (.occ-note--tone); the older ones below
 * are mapped to a tone by their own classes, so no template changed. Every
 * rule carries an id's weight (:not(#occ-note)) so module rules cannot win.
 * ================================================================== */
:is(
	.occ-note--info,
	.occ-agr-banner:not(.occ-agr-banner--green, .occ-agr-banner--red, .occ-agr-banner--amber),
	.occ-si-banner:not(.occ-si-banner--green, .occ-si-banner--red, .occ-si-banner--amber),
	.occ-rg-login-notice:not(.occ-rg-login-notice--warning, .occ-rg-login-notice--success),
	.occ-pw-message--info,
	.occ-access-info,
	.occ-asg-page .occ-tst-box-info,
	.occ-nn-dialog .occ-nn-info,
	.occ-note--success,
	.occ-agr-banner--green,
	.occ-si-banner--green,
	.occ-rg-alert.is-success,
	.occ-rg-login-notice--success,
	.occ-pw-alert.is-success,
	.occ-pw-message--success,
	.occ-access-notice:not(.occ-access-notice--error),
	.occ-client-companies-notice,
	.occ-temporary-staff-notice,
	.occ-pay-periods-notice,
	.occ-ts-employee-notice,
	.occ-ts-review-notice,
	.occ-notice-success,
	.occ-apps-flash:not(.is-error),
	.occ-sh-ok,
	.occ-al .occ-al-notice:not(.occ-al-notice--bad),
	.occ-msg .occ-msg-notice:not(.occ-msg-notice--bad),
	.occ-note--warning,
	.occ-agr-banner--amber,
	.occ-si-banner--amber,
	.occ-rg-login-notice--warning,
	.occ-pw-message--warning,
	.alert.not-allow-wrapper,
	.occ-an-notice,
	.occ-rg-form-error,
	.occ-note--error,
	.occ-agr-banner--red,
	.occ-si-banner--red,
	.occ-rg-alert:not(.is-success),
	.occ-pw-alert.is-error,
	.occ-pw-message--error,
	.occ-access-notice--error,
	.occ-client-companies-error,
	.occ-temporary-staff-error,
	.occ-pay-periods-error,
	.occ-ts-employee-error,
	.occ-ts-review-error,
	.occ-notice-error,
	.occ-apps-flash.is-error,
	.occ-apps-dialog-error,
	.occ-msg .occ-msg-notice--bad,
	.occ-bc-alert,
	.occ-hc .occ-fh-sp-alert,
	.occ-al .occ-al-notice--bad,
	.occ-na-note--error,
	.occ-asg-page .occ-ct-decide-error,
	.occ-profile-page .occ-password-form .alert
):not(#occ-note) {
	position: relative;
	padding: 12px 14px 12px 42px;
	border: 1px solid var(--occ-note-line);
	border-radius: 8px;
	background: var(--occ-note-bg);
	color: var(--occ-note-text);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	box-shadow: none;
}

:is(
	.occ-note--info,
	.occ-agr-banner:not(.occ-agr-banner--green, .occ-agr-banner--red, .occ-agr-banner--amber),
	.occ-si-banner:not(.occ-si-banner--green, .occ-si-banner--red, .occ-si-banner--amber),
	.occ-rg-login-notice:not(.occ-rg-login-notice--warning, .occ-rg-login-notice--success),
	.occ-pw-message--info,
	.occ-access-info,
	.occ-asg-page .occ-tst-box-info,
	.occ-nn-dialog .occ-nn-info,
	.occ-note--success,
	.occ-agr-banner--green,
	.occ-si-banner--green,
	.occ-rg-alert.is-success,
	.occ-rg-login-notice--success,
	.occ-pw-alert.is-success,
	.occ-pw-message--success,
	.occ-access-notice:not(.occ-access-notice--error),
	.occ-client-companies-notice,
	.occ-temporary-staff-notice,
	.occ-pay-periods-notice,
	.occ-ts-employee-notice,
	.occ-ts-review-notice,
	.occ-notice-success,
	.occ-apps-flash:not(.is-error),
	.occ-sh-ok,
	.occ-al .occ-al-notice:not(.occ-al-notice--bad),
	.occ-msg .occ-msg-notice:not(.occ-msg-notice--bad),
	.occ-note--warning,
	.occ-agr-banner--amber,
	.occ-si-banner--amber,
	.occ-rg-login-notice--warning,
	.occ-pw-message--warning,
	.alert.not-allow-wrapper,
	.occ-an-notice,
	.occ-rg-form-error,
	.occ-note--error,
	.occ-agr-banner--red,
	.occ-si-banner--red,
	.occ-rg-alert:not(.is-success),
	.occ-pw-alert.is-error,
	.occ-pw-message--error,
	.occ-access-notice--error,
	.occ-client-companies-error,
	.occ-temporary-staff-error,
	.occ-pay-periods-error,
	.occ-ts-employee-error,
	.occ-ts-review-error,
	.occ-notice-error,
	.occ-apps-flash.is-error,
	.occ-apps-dialog-error,
	.occ-msg .occ-msg-notice--bad,
	.occ-bc-alert,
	.occ-hc .occ-fh-sp-alert,
	.occ-al .occ-al-notice--bad,
	.occ-na-note--error,
	.occ-asg-page .occ-ct-decide-error,
	.occ-profile-page .occ-password-form .alert
):not(#occ-note)::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 14px;
	width: 18px;
	height: 18px;
	margin: 0;
	background: var(--occ-note-mark);
	-webkit-mask: var(--occ-note-icon) center / 18px 18px no-repeat;
	mask: var(--occ-note-icon) center / 18px 18px no-repeat;
}

/* The old notices' own first icons give way to the mark. */
:is(
	.occ-note--info,
	.occ-agr-banner:not(.occ-agr-banner--green, .occ-agr-banner--red, .occ-agr-banner--amber),
	.occ-si-banner:not(.occ-si-banner--green, .occ-si-banner--red, .occ-si-banner--amber),
	.occ-rg-login-notice:not(.occ-rg-login-notice--warning, .occ-rg-login-notice--success),
	.occ-pw-message--info,
	.occ-access-info,
	.occ-asg-page .occ-tst-box-info,
	.occ-nn-dialog .occ-nn-info,
	.occ-note--success,
	.occ-agr-banner--green,
	.occ-si-banner--green,
	.occ-rg-alert.is-success,
	.occ-rg-login-notice--success,
	.occ-pw-alert.is-success,
	.occ-pw-message--success,
	.occ-access-notice:not(.occ-access-notice--error),
	.occ-client-companies-notice,
	.occ-temporary-staff-notice,
	.occ-pay-periods-notice,
	.occ-ts-employee-notice,
	.occ-ts-review-notice,
	.occ-notice-success,
	.occ-apps-flash:not(.is-error),
	.occ-sh-ok,
	.occ-al .occ-al-notice:not(.occ-al-notice--bad),
	.occ-msg .occ-msg-notice:not(.occ-msg-notice--bad),
	.occ-note--warning,
	.occ-agr-banner--amber,
	.occ-si-banner--amber,
	.occ-rg-login-notice--warning,
	.occ-pw-message--warning,
	.alert.not-allow-wrapper,
	.occ-an-notice,
	.occ-rg-form-error,
	.occ-note--error,
	.occ-agr-banner--red,
	.occ-si-banner--red,
	.occ-rg-alert:not(.is-success),
	.occ-pw-alert.is-error,
	.occ-pw-message--error,
	.occ-access-notice--error,
	.occ-client-companies-error,
	.occ-temporary-staff-error,
	.occ-pay-periods-error,
	.occ-ts-employee-error,
	.occ-ts-review-error,
	.occ-notice-error,
	.occ-apps-flash.is-error,
	.occ-apps-dialog-error,
	.occ-msg .occ-msg-notice--bad,
	.occ-bc-alert,
	.occ-hc .occ-fh-sp-alert,
	.occ-al .occ-al-notice--bad,
	.occ-na-note--error,
	.occ-asg-page .occ-ct-decide-error,
	.occ-profile-page .occ-password-form .alert
):not(#occ-note) > :is(svg, .dashicons):first-child {
	display: none;
}

:is(
	.occ-note--info,
	.occ-agr-banner:not(.occ-agr-banner--green, .occ-agr-banner--red, .occ-agr-banner--amber),
	.occ-si-banner:not(.occ-si-banner--green, .occ-si-banner--red, .occ-si-banner--amber),
	.occ-rg-login-notice:not(.occ-rg-login-notice--warning, .occ-rg-login-notice--success),
	.occ-pw-message--info,
	.occ-access-info,
	.occ-asg-page .occ-tst-box-info,
	.occ-nn-dialog .occ-nn-info,
	.occ-note--success,
	.occ-agr-banner--green,
	.occ-si-banner--green,
	.occ-rg-alert.is-success,
	.occ-rg-login-notice--success,
	.occ-pw-alert.is-success,
	.occ-pw-message--success,
	.occ-access-notice:not(.occ-access-notice--error),
	.occ-client-companies-notice,
	.occ-temporary-staff-notice,
	.occ-pay-periods-notice,
	.occ-ts-employee-notice,
	.occ-ts-review-notice,
	.occ-notice-success,
	.occ-apps-flash:not(.is-error),
	.occ-sh-ok,
	.occ-al .occ-al-notice:not(.occ-al-notice--bad),
	.occ-msg .occ-msg-notice:not(.occ-msg-notice--bad),
	.occ-note--warning,
	.occ-agr-banner--amber,
	.occ-si-banner--amber,
	.occ-rg-login-notice--warning,
	.occ-pw-message--warning,
	.alert.not-allow-wrapper,
	.occ-an-notice,
	.occ-rg-form-error,
	.occ-note--error,
	.occ-agr-banner--red,
	.occ-si-banner--red,
	.occ-rg-alert:not(.is-success),
	.occ-pw-alert.is-error,
	.occ-pw-message--error,
	.occ-access-notice--error,
	.occ-client-companies-error,
	.occ-temporary-staff-error,
	.occ-pay-periods-error,
	.occ-ts-employee-error,
	.occ-ts-review-error,
	.occ-notice-error,
	.occ-apps-flash.is-error,
	.occ-apps-dialog-error,
	.occ-msg .occ-msg-notice--bad,
	.occ-bc-alert,
	.occ-hc .occ-fh-sp-alert,
	.occ-al .occ-al-notice--bad,
	.occ-na-note--error,
	.occ-asg-page .occ-ct-decide-error,
	.occ-profile-page .occ-password-form .alert
):not(#occ-note) :is(p, div > p) {
	margin: 0;
}

:is(
	.occ-note--info,
	.occ-agr-banner:not(.occ-agr-banner--green, .occ-agr-banner--red, .occ-agr-banner--amber),
	.occ-si-banner:not(.occ-si-banner--green, .occ-si-banner--red, .occ-si-banner--amber),
	.occ-rg-login-notice:not(.occ-rg-login-notice--warning, .occ-rg-login-notice--success),
	.occ-pw-message--info,
	.occ-access-info,
	.occ-asg-page .occ-tst-box-info,
	.occ-nn-dialog .occ-nn-info,
	.occ-note--success,
	.occ-agr-banner--green,
	.occ-si-banner--green,
	.occ-rg-alert.is-success,
	.occ-rg-login-notice--success,
	.occ-pw-alert.is-success,
	.occ-pw-message--success,
	.occ-access-notice:not(.occ-access-notice--error),
	.occ-client-companies-notice,
	.occ-temporary-staff-notice,
	.occ-pay-periods-notice,
	.occ-ts-employee-notice,
	.occ-ts-review-notice,
	.occ-notice-success,
	.occ-apps-flash:not(.is-error),
	.occ-sh-ok,
	.occ-al .occ-al-notice:not(.occ-al-notice--bad),
	.occ-msg .occ-msg-notice:not(.occ-msg-notice--bad),
	.occ-note--warning,
	.occ-agr-banner--amber,
	.occ-si-banner--amber,
	.occ-rg-login-notice--warning,
	.occ-pw-message--warning,
	.alert.not-allow-wrapper,
	.occ-an-notice,
	.occ-rg-form-error,
	.occ-note--error,
	.occ-agr-banner--red,
	.occ-si-banner--red,
	.occ-rg-alert:not(.is-success),
	.occ-pw-alert.is-error,
	.occ-pw-message--error,
	.occ-access-notice--error,
	.occ-client-companies-error,
	.occ-temporary-staff-error,
	.occ-pay-periods-error,
	.occ-ts-employee-error,
	.occ-ts-review-error,
	.occ-notice-error,
	.occ-apps-flash.is-error,
	.occ-apps-dialog-error,
	.occ-msg .occ-msg-notice--bad,
	.occ-bc-alert,
	.occ-hc .occ-fh-sp-alert,
	.occ-al .occ-al-notice--bad,
	.occ-na-note--error,
	.occ-asg-page .occ-ct-decide-error,
	.occ-profile-page .occ-password-form .alert
):not(#occ-note) strong {
	font-weight: 600;
	color: inherit;
}

:is(
	.occ-note--info,
	.occ-agr-banner:not(.occ-agr-banner--green, .occ-agr-banner--red, .occ-agr-banner--amber),
	.occ-si-banner:not(.occ-si-banner--green, .occ-si-banner--red, .occ-si-banner--amber),
	.occ-rg-login-notice:not(.occ-rg-login-notice--warning, .occ-rg-login-notice--success),
	.occ-pw-message--info,
	.occ-access-info,
	.occ-asg-page .occ-tst-box-info,
	.occ-nn-dialog .occ-nn-info,
	.occ-note--success,
	.occ-agr-banner--green,
	.occ-si-banner--green,
	.occ-rg-alert.is-success,
	.occ-rg-login-notice--success,
	.occ-pw-alert.is-success,
	.occ-pw-message--success,
	.occ-access-notice:not(.occ-access-notice--error),
	.occ-client-companies-notice,
	.occ-temporary-staff-notice,
	.occ-pay-periods-notice,
	.occ-ts-employee-notice,
	.occ-ts-review-notice,
	.occ-notice-success,
	.occ-apps-flash:not(.is-error),
	.occ-sh-ok,
	.occ-al .occ-al-notice:not(.occ-al-notice--bad),
	.occ-msg .occ-msg-notice:not(.occ-msg-notice--bad),
	.occ-note--warning,
	.occ-agr-banner--amber,
	.occ-si-banner--amber,
	.occ-rg-login-notice--warning,
	.occ-pw-message--warning,
	.occ-an-notice,
	.occ-rg-form-error,
	.occ-note--error,
	.occ-agr-banner--red,
	.occ-si-banner--red,
	.occ-rg-alert:not(.is-success),
	.occ-pw-alert.is-error,
	.occ-pw-message--error,
	.occ-access-notice--error,
	.occ-client-companies-error,
	.occ-temporary-staff-error,
	.occ-pay-periods-error,
	.occ-ts-employee-error,
	.occ-ts-review-error,
	.occ-notice-error,
	.occ-apps-flash.is-error,
	.occ-apps-dialog-error,
	.occ-msg .occ-msg-notice--bad,
	.occ-bc-alert,
	.occ-hc .occ-fh-sp-alert,
	.occ-al .occ-al-notice--bad,
	.occ-na-note--error,
	.occ-asg-page .occ-ct-decide-error,
	.occ-profile-page .occ-password-form .alert
):not(#occ-note) a:not([class*="occ-btn"]) {
	color: inherit;
	text-decoration: underline;
}

:is(
	.occ-note--info,
	.occ-agr-banner:not(.occ-agr-banner--green, .occ-agr-banner--red, .occ-agr-banner--amber),
	.occ-si-banner:not(.occ-si-banner--green, .occ-si-banner--red, .occ-si-banner--amber),
	.occ-rg-login-notice:not(.occ-rg-login-notice--warning, .occ-rg-login-notice--success),
	.occ-pw-message--info,
	.occ-access-info,
	.occ-asg-page .occ-tst-box-info,
	.occ-nn-dialog .occ-nn-info
):not(#occ-note) {
	--occ-note-line: #cddcf0;
	--occ-note-bg: #f5f9fd;
	--occ-note-text: #1e3a5f;
	--occ-note-mark: #2f5d95;
	--occ-note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
}

:is(
	.occ-note--success,
	.occ-agr-banner--green,
	.occ-si-banner--green,
	.occ-rg-alert.is-success,
	.occ-rg-login-notice--success,
	.occ-pw-alert.is-success,
	.occ-pw-message--success,
	.occ-access-notice:not(.occ-access-notice--error),
	.occ-client-companies-notice,
	.occ-temporary-staff-notice,
	.occ-pay-periods-notice,
	.occ-ts-employee-notice,
	.occ-ts-review-notice,
	.occ-notice-success,
	.occ-apps-flash:not(.is-error),
	.occ-sh-ok,
	.occ-al .occ-al-notice:not(.occ-al-notice--bad),
	.occ-msg .occ-msg-notice:not(.occ-msg-notice--bad)
):not(#occ-note) {
	--occ-note-line: #abefc6;
	--occ-note-bg: #f6fef9;
	--occ-note-text: #054f31;
	--occ-note-mark: #079455;
	--occ-note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

:is(
	.occ-note--warning,
	.occ-agr-banner--amber,
	.occ-si-banner--amber,
	.occ-rg-login-notice--warning,
	.occ-pw-message--warning,
	.alert.not-allow-wrapper,
	.occ-an-notice,
	.occ-rg-form-error
):not(#occ-note) {
	--occ-note-line: #fedf89;
	--occ-note-bg: #fffcf5;
	--occ-note-text: #7a2e0e;
	--occ-note-mark: #dc9c00;
	--occ-note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L2 21h20L12 3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
}

:is(
	.occ-note--error,
	.occ-agr-banner--red,
	.occ-si-banner--red,
	.occ-rg-alert:not(.is-success),
	.occ-pw-alert.is-error,
	.occ-pw-message--error,
	.occ-access-notice--error,
	.occ-client-companies-error,
	.occ-temporary-staff-error,
	.occ-pay-periods-error,
	.occ-ts-employee-error,
	.occ-ts-review-error,
	.occ-notice-error,
	.occ-apps-flash.is-error,
	.occ-apps-dialog-error,
	.occ-msg .occ-msg-notice--bad,
	.occ-bc-alert,
	.occ-hc .occ-fh-sp-alert,
	.occ-al .occ-al-notice--bad,
	.occ-na-note--error,
	.occ-asg-page .occ-ct-decide-error,
	.occ-profile-page .occ-password-form .alert
):not(#occ-note) {
	--occ-note-line: #fecdca;
	--occ-note-bg: #fffbfa;
	--occ-note-text: #7a271a;
	--occ-note-mark: #d92d20;
	--occ-note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
}

/* b10.1168 (D-462, Philipp: "lets do that"): WP Job Board's "You need to login
 * with ... account" and "You need to be signed in" boxes are warnings in 13D
 * too (listed above as .alert.not-allow-wrapper). Its Sign in button stays the
 * theme's, so it is left out of the notices' link rule; the box loses
 * Bootstrap's own margin. */
.box-dashboard-wrapper > .alert.not-allow-wrapper:not(#occ-note) {
	margin: 0;
}

.alert.not-allow-wrapper:not(#occ-note) .account-sign-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}