/**
 * Assignments: the agency, client and employee pages on the dashboard.
 *
 * This module's first stylesheet (D-308). Its nine frontend pages shipped with
 * none, so each rendered with the theme's bare defaults: buttons as plain text,
 * tables as ruled grids, fields at the browser's size.
 *
 * ── The values are AccessManager's, which were read off the theme ─────────
 *
 * `access-manager-frontend.css` measured the dashboard on MIRROR 2026-09-09
 * (card, input, label, table head, row rule) and its Manage Staff page is the
 * one these pages sit beside in the same menu. So the same numbers are used
 * here, and the same two choices: compact tables, and rows as cards rather
 * than a ruled grid. If the theme is restyled, read them again in one place
 * and change both files.
 *
 * ── Scoped by structure, not by a class per element ───────────────────────
 *
 * The templates were written without a stylesheet in mind, so most elements
 * carry no class. Every page root carries `occ-asg-page` beside its own class,
 * every rule is scoped to it, and the rules style by structure: a section is a
 * block with its own h3, a field is a label in a paragraph, a list is a table
 * with a head, a summary is a table without one. A new page gets the look by
 * adding `occ-asg-page` to its root and using the same shapes.
 *
 * `:has()` finds sections without a class on each; it is in every browser the
 * dashboard supports.
 *
 * @package OCC\Modules\Assignments
 * @since   1.0.0
 */

/* ------------------------------------------------------------------ page */

/*
 * The dashboard's content column has no padding of its own; the templates'
 * inline style used to centre each page at 1100px, which is what gave them
 * their gutter beside the menu. Kept, now that the inline styles are gone.
 */
.occ-asg-page {
	max-width: 1100px;
	margin: 0 auto 2em;
	font-size: 15px;
	color: #696969;
}

.occ-asg-page h2 {
	margin: 0 0 .25em;
	color: #202124;
}

.occ-asg-page h3 {
	margin: 0 0 15px;
	font-size: 18px;
	color: #202124;
}

/* The agency or client the page is about, under the title. */
:is(.occ-client-companies-agency, .occ-temporary-staff-company, .occ-pay-periods-company, .occ-client-timesheets-company, .occ-assigned-workers-company) {
	margin: 0 0 25px;
	font-size: 14px;
	color: #696969;
}

/* ------------------------------------------------------------- sections */

/*
 * A section is a block that opens with its own heading. Cards, as on Manage
 * Staff and on the theme's own dashboard pages.
 */
.occ-asg-page :is(div, form):has(> h3) {
	background: #fff;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	padding: 24px;
	margin: 0 0 30px;
}

/* A card inside a card is a sub-section: a rule above it, no second frame. */
.occ-asg-page :is(div, form):has(> h3) :is(div, form):has(> h3) {
	background: none;
	border: 0;
	border-top: 1px solid #ecedf2;
	border-radius: 0;
	box-shadow: none;
	padding: 20px 0 0;
	margin: 20px 0 0;
}

/*
 * A later h3 in the same card starts a new group of fields. `~` rather than
 * `:not(:first-child)`: a form opens with its hidden inputs, so its first
 * heading is never the first child.
 */
.occ-asg-page :is(div, form):has(> h3) > h3 ~ h3 {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #ecedf2;
}

.occ-asg-page :is(div, form):has(> h3) > :last-child {
	margin-bottom: 0;
}

/*
 * A list sits on its own white card, as on Manage Staff, so the tinted head
 * band reads against white rather than disappearing into the page.
 */
.occ-asg-page > div:has(> table) {
	background: #fff;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	padding: 14px 20px;
	margin: 0 0 30px;
}

.occ-asg-page > div:has(> table) > table:has(> thead) {
	margin: 0;
}

/* --------------------------------------------------------------- notices */

:is(.occ-client-companies-notice, .occ-temporary-staff-notice, .occ-pay-periods-notice, .occ-ts-employee-notice, .occ-ts-review-notice, .occ-notice-success),
:is(.occ-client-companies-error, .occ-temporary-staff-error, .occ-pay-periods-error, .occ-ts-employee-error, .occ-ts-review-error, .occ-notice-error) {
	margin: 0 0 25px;
	padding: 15px 20px;
	/* D-342: outlined all round, no edge thicker than the others. */
	border: 1px solid var(--occ-ui-green-line);
	border-radius: 10px;
	background: var(--occ-ui-green-soft);
	color: var(--occ-ui-text-2);
}

:is(.occ-client-companies-error, .occ-temporary-staff-error, .occ-pay-periods-error, .occ-ts-employee-error, .occ-ts-review-error, .occ-notice-error) {
	border-color: var(--occ-ui-red-line);
	background: var(--occ-ui-red-soft);
}

:is(.occ-notice, .occ-ts-employee-notice, .occ-ts-review-notice, .occ-ts-employee-error, .occ-ts-review-error) > :last-child {
	margin-bottom: 0;
}

:is(.occ-notice, .occ-ts-employee-error, .occ-ts-review-error) ul {
	margin: .5em 0 0 1.25em;
}

/*
 * Asides: read-only, a missing rule, a returned timesheet's note. Blue for
 * information, amber for something to act on, grey for history.
 */
.occ-client-companies-readonly,
.occ-pay-periods-no-rule,
.occ-ts-employee-return {
	margin: 0 0 25px;
	padding: 15px 20px;
	/* D-342: outlined all round, no edge thicker than the others. */
	border: 1px solid #0073aa;
	border-radius: 8px;
	background: rgba(0, 115, 170, .06);
	color: #202124;
}

.occ-pay-periods-no-rule,
.occ-ts-employee-return.is-current {
	border-color: #ffb900;
	background: rgba(255, 185, 0, .1);
}

.occ-ts-employee-return {
	border-color: var(--occ-ui-field-border);
	background: #f5f7fc;
}

/* The pay-period warning is a card-sized aside with its own heading. */
.occ-asg-page .occ-pay-periods-no-rule:has(> h3) {
	/* D-342: outlined all round, no edge thicker than the others. */
	border: 1px solid #ffb900;
	background: rgba(255, 185, 0, .1);
	box-shadow: none;
}

:is(.occ-client-companies-readonly, .occ-pay-periods-no-rule, .occ-ts-employee-return) > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- fields */

.occ-asg-page form p {
	margin: 0 0 24px;
}

/* The templates break the line after a label; the label is a block already. */
.occ-asg-page form p > label + br {
	display: none;
}

/* The help line under a field. */
.occ-asg-page form p > :is(input, select, textarea) ~ span {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #696969;
}

/* A label on its own over its field. */
.occ-asg-page form p > label:not(:has(input[type="checkbox"])) {
	display: block;
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: #202124;
}

/*
 * D-394 (b10.674), Philipp: "white, bordered" for every OCC form. These were
 * the theme's filled boxes (#f0f5f7 fill and a border of the same colour, so
 * none showed), 50px tall; now the shared field from occ-ui.css.
 */
.occ-asg-page :is(input[type="text"], input[type="email"], input[type="search"], input[type="date"], input[type="time"], input[type="number"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: 32em;
	height: var(--occ-ui-field-h);
	padding: 0 12px;
	margin: 0;
	background-color: var(--occ-ui-field-bg);
	border: 1px solid var(--occ-ui-field-border);
	border-radius: var(--occ-ui-field-radius);
	font: inherit;
	font-size: 14px;
	color: var(--occ-ui-field-text);
	box-shadow: none;
	/* b10.680: no load-time resize from the theme's `transition: all`. */
	transition: border-color .15s ease, box-shadow .15s ease;
}

.occ-asg-page :is(input, textarea)::placeholder {
	color: var(--occ-ui-field-placeholder);
	opacity: 1;
}

.occ-asg-page textarea {
	height: auto;
	min-height: 110px;
	padding: 10px 12px;
	line-height: 1.5;
}

.occ-asg-page :is(input, select, textarea):focus {
	outline: 0;
	border-color: var(--occ-ui-chosen-line);
	background-color: var(--occ-ui-field-bg);
	box-shadow: var(--occ-ui-field-focus);
}

.occ-asg-page select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23696969' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* A checkbox and its words on one line. */
.occ-asg-page label:has(> input[type="checkbox"]) {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	color: #202124;
	cursor: pointer;
}

.occ-asg-page input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--occ-ui-chosen-line);
}

.occ-asg-page fieldset {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.occ-asg-page legend {
	margin: 0 0 10px;
	font-size: 16px; /* D-394: not the theme's 22.5px legend */
	line-height: 24px;
	font-weight: 600;
	color: #202124;
}

/*
 * Search, filter and picker forms: one row of fields ending in the button,
 * wrapping on narrow screens. Their paragraphs are only there to separate
 * fields, so they lose their own margins.
 */
:is(.occ-temporary-staff-search, .occ-client-timesheets-filters, .occ-pay-periods-picker) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 15px 20px;
	margin: 0 0 25px;
}

:is(.occ-temporary-staff-search, .occ-client-timesheets-filters, .occ-pay-periods-picker) > p {
	margin: 0;
}

:is(.occ-temporary-staff-search, .occ-pay-periods-picker) > label {
	flex: 0 0 100%;
	margin: 0 0 -7px;
	font-size: 15px;
	font-weight: 600;
	color: #202124;
}

:is(.occ-temporary-staff-search, .occ-client-timesheets-filters, .occ-pay-periods-picker) :is(input, select) {
	width: auto;
	min-width: 14em;
}

:is(.occ-temporary-staff-search, .occ-client-timesheets-filters, .occ-pay-periods-picker) :is(.button, button[type="submit"]) {
	height: var(--occ-ui-field-h);
	padding: 0 26px;
}

/* --------------------------------------------------------------- buttons */

/*
 * `.button` is WordPress's admin class, which the theme does not style on the
 * front end. Quiet by default, as on Manage Staff; `.button-primary` is the
 * theme's burgundy. A bare submit button in a row is quiet too.
 */
.occ-asg-page :is(.button, button[type="submit"]) {
	display: inline-block;
	box-sizing: border-box;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 13px 22px 11px; /* b10.688: Figtree sits high; the text 1px lower centres its capitals. */
	background: var(--occ-ui-white);
	border: 1px solid var(--occ-ui-border);
	border-radius: 8px;
	box-shadow: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--occ-ui-text-2);
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	vertical-align: middle;
}

/* D-365 build 3: the secondary button's hover is grey; the primary's is the standard's burgundy. */
.occ-asg-page :is(.button, button[type="submit"]):is(:hover, :focus) {
	background: var(--occ-ui-fill-soft);
	border-color: var(--occ-ui-faint);
	color: var(--occ-ui-text);
}

.occ-asg-page .button.button-primary {
	padding: 15px 30px;
	background: var(--occ-ui-brand);
	border-color: var(--occ-ui-brand);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.occ-asg-page .button.button-primary:is(:hover, :focus) {
	background: var(--occ-ui-brand-hover);
	border-color: var(--occ-ui-brand-hover);
	color: #fff;
}

/* The Cancel or Back link beside a primary button. */
.occ-asg-page form p > .button + a,
.occ-asg-page form p > button + a {
	margin-left: 15px;
}

.occ-asg-page a:not(.button) {
	color: #a41e32;
	text-decoration: none;
}

.occ-asg-page a:not(.button):is(:hover, :focus) {
	color: var(--occ-ui-brand-hover);
	text-decoration: none;
}

/* The "Current | Ended | All" and paging rows. */
:is(.occ-temporary-staff-show, .occ-assigned-workers-show, .occ-client-timesheets-paging) {
	margin: 0 0 15px;
	font-size: 14px;
}

:is(.occ-temporary-staff-show, .occ-assigned-workers-show) strong {
	color: #202124;
}

/* ---------------------------------------------------------------- tables */

/* Lists: a table with a head. Rows are cards, as on Manage Staff. */
.occ-asg-page table:has(> thead) {
	width: 100%;
	margin: 0 0 15px;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 6px;
	background: none;
}

.occ-asg-page table:has(> thead) th {
	padding: 12px 16px;
	border: 0;
	background: var(--occ-ui-fill-soft);
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-text-3);
	white-space: nowrap;
}

.occ-asg-page table:has(> thead) th:first-child {
	border-radius: 8px 0 0 8px;
}

.occ-asg-page table:has(> thead) th:last-child {
	border-radius: 0 8px 8px 0;
}

.occ-asg-page table:has(> thead) tbody td {
	padding: 12px 16px;
	vertical-align: middle;
	background: #fff;
	border: 0;
	border-top: 1px solid #ecedf2;
	border-bottom: 1px solid #ecedf2;
	font-size: 14px;
	color: #696969;
}

.occ-asg-page table:has(> thead) tbody td:first-child {
	border-left: 1px solid #ecedf2;
	border-radius: 8px 0 0 8px;
	color: #202124;
}

.occ-asg-page table:has(> thead) tbody td:last-child {
	border-right: 1px solid #ecedf2;
	border-radius: 0 8px 8px 0;
}

.occ-asg-page table:has(> thead) tbody tr:hover td {
	background: var(--occ-ui-fill-soft);
}

.occ-asg-page table form {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.occ-asg-page table :is(.button, button[type="submit"]) {
	padding: 8px 14px;
	font-size: 13px;
}

/* The line under a name in a row: worksite, role, code, backup. */
.occ-asg-sub {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: #696969;
}

.occ-asg-nowrap {
	white-space: nowrap;
}

/* A timesheet sent back for changes, in a list of them. */
.occ-asg-page td.occ-asg-returned {
	font-weight: 600;
	color: #b32d2e;
}

/*
 * b10.680: a scroll box around a table is positioned, so the table's own
 * screen-reader text (position: absolute) stays inside it. Without this, the
 * hidden "Sort" words of a header sat 1135px to the right on a phone and the
 * whole Timesheets page (and Pay periods) scrolled sideways by 761px (133px).
 */
.occ-asg-page :is(div:has(> table), .occ-ts-table-wrap, .occ-ct-table-wrap, .occ-sh-table-wrap) {
	position: relative;
}

/* Wide lists scroll inside their own box on a phone instead of the page. */
.occ-asg-page div:has(> table) {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Summaries: a table without a head is label and value, one pair a row. */
.occ-asg-page table:not(:has(> thead)) {
	width: 100%;
	max-width: 40em;
	margin: 0 0 25px;
	border: 0;
	border-collapse: collapse;
	background: none;
}

.occ-asg-page table:not(:has(> thead)) :is(th, td) {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid #ecedf2;
	background: none;
	text-align: left;
	vertical-align: top;
	font-size: 14px;
}

.occ-asg-page table:not(:has(> thead)) th {
	width: 40%;
	padding-right: 20px;
	font-weight: 500;
	color: #696969;
}

.occ-asg-page table:not(:has(> thead)) td {
	color: #202124;
}

:is(.occ-ts-employee, .occ-ts-review) table caption {
	margin: 0 0 8px;
	text-align: left;
	font-weight: 600;
	color: #202124;
}

/* The timesheet's own lines: fields inside cells, so smaller ones. */
.occ-ts-employee-lines :is(input[type="text"], input[type="date"], input[type="time"], input[type="number"]),
.occ-ts-employee-lines textarea {
	max-width: none;
	min-width: 7em;
	height: var(--occ-ui-field-h-sm);
	padding: 0 10px;
	font-size: 14px;
}

.occ-ts-employee-lines textarea {
	height: 40px;
	min-height: 40px;
	padding: 8px 10px;
}

.occ-ts-employee-lines td label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	white-space: nowrap;
}

/* ----------------------------------------------------------------- lists */

.occ-asg-page :is(div, form):has(> h3) ul {
	margin: 0 0 15px 1.25em;
	padding: 0;
}

/* The timesheet's history: a vertical trail of dated events. */
.occ-client-timesheet-trail {
	margin: 0;
	padding: 0 0 0 22px;
	list-style: none;
	border-left: 2px solid #ecedf2;
}

.occ-client-timesheet-event {
	position: relative;
	margin: 0 0 14px;
	font-size: 14px;
	color: #202124;
}

.occ-client-timesheet-event::before {
	content: "";
	position: absolute;
	left: -29px;
	top: 5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #a41e32;
	border: 2px solid #fff;
}

.occ-client-timesheet-event-waiting {
	color: #696969;
}

.occ-client-timesheet-event-waiting::before {
	background: #fff;
	border-color: var(--occ-ui-field-border);
}

/* A person on the company's people list, with their actions beside them. */
.occ-client-companies-person {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 15px;
	padding: 12px 0;
	border-bottom: 1px solid #ecedf2;
}

.occ-client-companies-person > p {
	flex: 1 1 14em;
	margin: 0;
	color: #202124;
}

.occ-client-companies-person form {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.occ-client-companies-person form label {
	font-size: 13px;
	font-weight: 500;
}

.occ-client-companies-person form input[type="text"] {
	width: auto;
	height: 40px;
	min-width: 12em;
	font-size: 14px;
}

/* =========================================================================
 * D-309: follow the theme's own dashboard pages, and read plainly
 *
 * Philipp, 2026-09-21: the pages should follow the other front-end pages, a
 * little more modern, and above all logical, because the people using them
 * may not use a computer much. So: the theme's title spacing and burgundy
 * section capitals; one clear main action per page; each row's action a
 * visible button; filters in a bar; tabs for Current, Ended, All; single
 * column forms with true pairs side by side; an empty list said on a card.
 * Reviewed on MIRROR in the Test Agency browser before it was written here.
 * ========================================================================= */

/* The theme's own dashboard pages open their title about 70px below the header. */
.occ-asg-page {
	padding-top: 45px;
	color: #4a4a4a;
}

.occ-asg-page > h2:first-child,
.occ-asg-page > h2:first-of-type {
	margin-bottom: 6px;
	font-size: 32px;
}

/*
 * D-352, Philipp 2026-09-24: inside the theme's dashboard the pages take the
 * dashboard's full width and gutter rather than a centred 1100px, read from
 * the theme on MIRROR: `.box-dashboard-wrapper` pads 15px, 30px from 992px and
 * 60px from 1350px, and its title is 20px, 30px from 1200px, weight 500.
 * Pages outside the dashboard (an approver's email link) keep the 1100px.
 */
.inner-dashboard .occ-asg-page {
	max-width: none;
	margin: 0 0 2em;
	padding: 15px 15px 0;
}

/*
 * b10.542: My Timesheets and My Assignment are built in Elementor, whose boxed
 * container centres its content at 1320px with its own padding, so those pages
 * sat in a narrower column further right than the rest of the dashboard. Inside
 * the dashboard an Elementor container holding one of these pages steps aside.
 * `!important` because Elementor's own rules carry the same weight and load later.
 */
.inner-dashboard .e-con:has(.occ-asg-page) {
	padding: 0 !important;
}

.inner-dashboard .e-con:has(.occ-asg-page) > .e-con-inner {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.inner-dashboard .occ-asg-page > h2:first-child,
.inner-dashboard .occ-asg-page > h2:first-of-type {
	font-size: 20px;
	font-weight: 500;
}

@media (min-width: 992px) {
	.inner-dashboard .occ-asg-page {
		padding: 30px 30px 0;
	}
}

@media (min-width: 1200px) {
	.inner-dashboard .occ-asg-page > h2:first-child,
	.inner-dashboard .occ-asg-page > h2:first-of-type {
		font-size: 30px;
	}
}

@media (min-width: 1350px) {
	.inner-dashboard .occ-asg-page {
		padding: 60px 60px 0;
	}
}

/* Section headings in cards: the theme's burgundy capitals, as on Edit Profile. */
.occ-asg-page :is(div, form):has(> h3) > h3 {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 600;
	color: var(--occ-ui-text);
}

/*
 * Forms are one column: the easiest shape to fill in, top to bottom, for
 * somebody who does not do this every day. The exception is a pair of fields
 * that belong together, which sit side by side on a wide screen so the pair
 * reads as one question: start and end date, primary and backup approver,
 * first and last name. Pairs are named here by their field, so a form never
 * pairs two things only because they happen to be next to each other.
 */
.occ-asg-page :is(form:has(> h3), div:has(> h3) > form, .occ-temporary-staff-chooser > form) {
	max-width: 760px;
}

@media (min-width: 900px) {
	.occ-asg-page :is(form:has(> h3), div:has(> h3) > form, .occ-temporary-staff-chooser > form) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		align-items: start;
	}

	.occ-asg-page :is(form:has(> h3), div:has(> h3) > form, .occ-temporary-staff-chooser > form) > * {
		grid-column: 1 / -1;
	}

	.occ-asg-page :is(form:has(> h3), div:has(> h3) > form, .occ-temporary-staff-chooser > form) > input[type="hidden"] {
		display: none;
	}

	/* Every field in these forms fills its column, so the right edges line up. */
	.occ-asg-page :is(form:has(> h3), div:has(> h3) > form, .occ-temporary-staff-chooser > form) :is(input[type="text"], input[type="email"], input[type="date"], input[type="time"], input[type="number"], select, textarea) {
		max-width: none;
	}

	.occ-asg-page form > p:has(> :is(
		[name="occ_tst_worker"],
		[name="occ_tst_client"],
		[name="occ_md_f_worksite_id"],
		[name="occ_md_f_job_title"],
		[name="occ_md_f_start_date"],
		[name="occ_md_f_end_date"],
		[name="occ_md_f_primary_approver_id"],
		[name="occ_md_f_backup_approver_id"],
		[name="occ_cc_principal_first"],
		[name="occ_cc_principal_last"],
		[name="occ_cc_address"],
		[name="occ_cc_phone"],
		[name="occ_cc_contact_name"],
		[name="occ_cc_contact_email"],
		[name="occ_cc_site_name"],
		[name="occ_cc_site_timezone"],
		[name="occ_pp_frequency"],
		[name="occ_pp_anchor"],
		[name="occ_team_name"],
		[name="occ_team_email"]
	)) {
		grid-column: auto;
	}

	.occ-asg-page form > p:has(> :is(
		[name="occ_tst_worker"],
		[name="occ_tst_client"],
		[name="occ_md_f_worksite_id"],
		[name="occ_md_f_job_title"],
		[name="occ_md_f_start_date"],
		[name="occ_md_f_end_date"],
		[name="occ_md_f_primary_approver_id"],
		[name="occ_md_f_backup_approver_id"],
		[name="occ_cc_principal_first"],
		[name="occ_cc_principal_last"],
		[name="occ_cc_address"],
		[name="occ_cc_phone"],
		[name="occ_cc_contact_name"],
		[name="occ_cc_contact_email"],
		[name="occ_cc_site_name"],
		[name="occ_cc_site_timezone"],
		[name="occ_pp_frequency"],
		[name="occ_pp_anchor"],
		[name="occ_team_name"],
		[name="occ_team_email"]
	)) :is(input, select) {
		max-width: none;
	}
}

/* The worker and client chooser above an assignment is a card of its own. */
.occ-temporary-staff-chooser {
	background: #fff;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	padding: 24px;
	margin: 0 0 30px;
}

.occ-temporary-staff-chooser > :last-child {
	margin-bottom: 0;
}

/* Every row's own action reads as a button, with an arrow: the one thing to press on that line. */
.occ-asg-page table:has(> thead) tbody td:last-child > a:not(.button):only-child,
.occ-asg-page table:has(> thead) tbody td:last-child > a:not(.button):last-child {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--occ-ui-border);
	border-radius: 8px;
	background: var(--occ-ui-white);
	font-size: 13px;
	font-weight: 600;
	color: var(--occ-ui-text-2);
	white-space: nowrap;
}

.occ-asg-page table:has(> thead) tbody td:last-child > a:not(.button):last-child::after {
	content: "\203A";
	font-size: 16px;
	line-height: 1;
}

/* D-365 build 3: a row's action is a secondary button; hover grey. */
.occ-asg-page table:has(> thead) tbody td:last-child > a:not(.button):last-child:is(:hover, :focus) {
	border-color: var(--occ-ui-faint);
	background: var(--occ-ui-fill-soft);
	color: var(--occ-ui-text);
	text-decoration: none;
}

.occ-asg-page table:has(> thead) tbody td:last-child {
	text-align: right;
}

/*
 * "Current | Ended | All": the standard's segmented control (D-365, b10.546),
 * as `.occ-staff-filters` draws it: a grey track, the chosen one a white tile.
 * It was burgundy. The separators are text, so they are sized away.
 */
:is(.occ-temporary-staff-show, .occ-assigned-workers-show) {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	margin: 0 0 20px;
	border: 0;
	border-radius: 10px;
	background: var(--occ-ui-fill);
	font-size: 0;
}

:is(.occ-temporary-staff-show, .occ-assigned-workers-show) > :is(a, strong) {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 30px;
	padding: 0 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	color: var(--occ-ui-text-3);
	text-decoration: none;
	white-space: nowrap;
}

:is(.occ-temporary-staff-show, .occ-assigned-workers-show) > strong {
	background: var(--occ-ui-white);
	box-shadow: var(--occ-ui-tile-shadow);
	color: var(--occ-ui-text);
	font-weight: 600;
}

:is(.occ-temporary-staff-show, .occ-assigned-workers-show) > a:is(:hover, :focus) {
	background: var(--occ-ui-line-soft);
	color: var(--occ-ui-text);
	text-decoration: none;
}

/* b10.546: an approved timesheet's payroll outcome, under its status on the agency's list. */
.occ-asg-page .occ-ct-payroll {
	display: block;
	margin-top: 6px;
}

/* b10.546: beside the find box, the toolbar spaces it. */
.occ-asg-page .occ-tst-toolbar .occ-temporary-staff-show {
	margin: 0;
}

/* b10.550: the page's link colour (burgundy) outweighed the choice's grey. */
.occ-asg-page :is(.occ-temporary-staff-show, .occ-assigned-workers-show) > a:not(.button) {
	color: var(--occ-ui-text-3);
	text-decoration: none;
}

.occ-asg-page :is(.occ-temporary-staff-show, .occ-assigned-workers-show) > a:not(.button):is(:hover, :focus) {
	color: var(--occ-ui-text);
}

/* b10.550: on the assignment page the last column is the state, not the actions: it lines up under its heading. */
.occ-asg-page table.occ-temporary-staff-timesheet-list tbody td:last-child {
	text-align: left;
}

/* D-403: a submitted timesheet opens from the assignment, by its period or by PDF and Open at the right. */
.occ-asg-page table.occ-temporary-staff-timesheet-list tbody td.occ-ct-actions {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

/* The two never wrap here, so neither keeps the wrap's 6px underneath (b10.754). */
.occ-asg-page table.occ-temporary-staff-timesheet-list tbody td.occ-ct-actions .button {
	margin-bottom: 0;
}

.occ-asg-page table.occ-temporary-staff-timesheet-list a.occ-tst-ts-open {
	font-weight: 600;
	color: var(--occ-ui-navy);
	text-decoration: none;
}

/* b10.550: the find box and its button at the field height, as on Timesheets (44px since D-394, b10.680). */
.occ-asg-page .occ-tst-toolbar .occ-tst-find input[type="search"],
.occ-asg-page .occ-tst-toolbar .occ-tst-find .occ-access-button {
	height: var(--occ-ui-field-h);
}

.occ-asg-page .occ-tst-toolbar .occ-tst-find .occ-access-button {
	line-height: var(--occ-ui-field-h);
}

/* A "Back to..." or "All ..." link on its own line at the top: an arrow in front says where it goes. */
.occ-asg-page > p:has(> a:only-child:not(.button)) > a::before {
	content: "\2039";
	margin-right: 8px;
	font-size: 18px;
	line-height: 1;
}

.occ-asg-page > p:has(> a:only-child:not(.button)) {
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 500;
}

/* Search and filter rows sit in a light bar of their own, so they read as "narrow the list below". */
:is(.occ-temporary-staff-search, .occ-client-timesheets-filters) {
	padding: 18px 20px;
	border: 1px solid #ecedf2;
	border-radius: 8px;
	background: #fff;
}

/* A plain sentence standing alone on the page, such as an empty list, sits on a card too. */
.occ-asg-page > p:not([class]):not(:has(a)):not(:first-of-type) {
	padding: 22px 24px;
	border: 1px dashed #d9dbe4;
	border-radius: 8px;
	background: #fff;
	color: #4a4a4a;
}

/* Keyboard users see where they are. D-365 build 3: the standard's navy ring. */
.occ-asg-page :is(a, button, .button, input, select, textarea):focus-visible {
	outline: 2px solid var(--occ-ui-focus-ring);
	outline-offset: 2px;
}

/* A page's own "Add ..." button, alone under the title, is its main action: filled, with a plus. */
.occ-asg-page > p:has(> a.button:only-child) {
	margin: 0 0 25px;
}

.occ-asg-page > p > a.button:only-child {
	padding: 14px 26px;
	background: var(--occ-ui-brand);
	border-color: var(--occ-ui-brand);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.occ-asg-page > p > a.button.occ-asg-add:only-child::before {
	content: "+";
	margin-right: 8px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.occ-asg-page > p > a.button:only-child:is(:hover, :focus) {
	background: var(--occ-ui-brand-hover);
	border-color: var(--occ-ui-brand-hover);
	color: #fff;
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 600px) {

	.occ-asg-page :is(div, form):has(> h3) {
		padding: 20px;
	}

	:is(.occ-temporary-staff-search, .occ-client-timesheets-filters, .occ-pay-periods-picker) :is(input, select) {
		width: 100%;
		min-width: 0;
	}

	.occ-asg-page form p > .button + a {
		display: inline-block;
		margin: 12px 0 0;
	}
}

/* =========================================================================
 * D-311: the theme's dashboard look. Tiles, titled cards, friendly empties.
 *
 * Built from OCC_Asg_UI's markup. The numbers are the theme's own dashboard
 * ("Applications statistics" and "Your Profile Views"), read on MIRROR
 * 2026-09-21: a 30px gap, white cards with a 60px tinted icon square, the
 * number in the tile's colour.
 * ========================================================================= */

/* ------------------------------------------------------------------ tiles */

/*
 * D-352, Philipp 2026-09-24: the tiles match the User Dashboard's
 * "Applications statistics" exactly, read from the theme's own stylesheet on
 * MIRROR: one column, two from 768px, four from 1200px (the theme's
 * col-xs-12 col-sm-6 col-lg-3 with its 30px gutter; D-353 spans the row from
 * 1200px instead); a 1px #ecedf2 card at
 * 15px, 30px from 1350px; a 50px icon square with a 20px glyph, 70px and 30px
 * from 1350px; the number 25px, 30px from 1350px; the label 15px. No tile is
 * marked as the list on screen: the dashboard marks none, and the filters
 * under it already say which list it is.
 */
.occ-asg-stats {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 15px;
	margin: 0 0 30px;
}

@media (min-width: 768px) {
	.occ-asg-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px 30px;
	}

	/* D-353: an odd tile out on two columns takes the whole row rather than half of it. */
	.occ-asg-stats > .occ-asg-stat:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/*
 * D-353, Philipp 2026-09-24: from 1200px the tiles share one row across the
 * body, whatever their number: three make three columns, four make four, so
 * the row lines up with the card under it instead of leaving the dashboard's
 * fourth slot empty.
 */
@media (min-width: 1200px) {
	.occ-asg-stats {
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: 30px;
	}

	.occ-asg-stats > .occ-asg-stat:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

.occ-asg-page .occ-asg-stat {
	/* b10.546, D-365: the standard's meaning colours; they were Google's. */
	--occ-tone: var(--occ-ui-dot-navy);
	--occ-tone-bg: var(--occ-ui-blue-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	box-sizing: border-box;
	padding: 15px;
	background: #fff;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	color: #202124;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.occ-asg-page .occ-asg-stat--red {
	--occ-tone: var(--occ-ui-dot-red);
	--occ-tone-bg: var(--occ-ui-red-soft);
}

.occ-asg-page .occ-asg-stat--amber {
	--occ-tone: var(--occ-ui-dot-amber);
	--occ-tone-bg: #fffaeb;
}

.occ-asg-page .occ-asg-stat--green {
	--occ-tone: var(--occ-ui-dot-green);
	--occ-tone-bg: var(--occ-ui-green-soft);
}

.occ-asg-stat-icon {
	display: flex;
	flex: 0 0 50px;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 8px;
	background: var(--occ-tone-bg);
	color: var(--occ-tone);
}

.occ-asg-stat-icon .occ-asg-icon {
	width: 20px;
	height: 20px;
}

.occ-asg-stat-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	min-width: 0;
}

.occ-asg-stat-value {
	margin-bottom: 5px;
	font-size: 25px;
	font-weight: 500;
	line-height: 1;
	color: var(--occ-tone);
}

.occ-asg-stat-label {
	font-size: 15px;
	/* Philipp, b10.473: 1.75 (the theme's) made a two-line label too tall. */
	line-height: 1.35;
	color: #202124;
}

@media (min-width: 1350px) {
	.occ-asg-page .occ-asg-stat {
		padding: 30px;
	}

	.occ-asg-stat-icon {
		flex-basis: 70px;
		width: 70px;
		height: 70px;
	}

	.occ-asg-stat-icon .occ-asg-icon {
		width: 30px;
		height: 30px;
	}

	.occ-asg-stat-value {
		margin-bottom: 10px;
		font-size: 30px;
	}
}

/*
 * b10.680: a tile that is a link took the page's link colour (burgundy) from
 * `.occ-asg-page a:not(.button)`, which outweighs `.occ-asg-page .occ-asg-stat`.
 */
.occ-asg-page a.occ-asg-stat {
	color: #202124;
}

/* A tile that is also a link lifts under the pointer. */
.occ-asg-page a.occ-asg-stat:is(:hover, :focus-visible) {
	transform: translateY(-2px);
	border-color: var(--occ-tone);
	box-shadow: none;
	color: #202124;
	text-decoration: none;
}


/* ------------------------------------------------------------ card titles */

/* A card's title: icon square, words, count. Normal case, as the theme's widget titles. */
.occ-asg-page h3.occ-asg-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	padding: 0 0 18px;
	border-bottom: 1px solid #ecedf2;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.3;
	color: #202124;
}

/* A later title inside the same card starts a group: the rule above it is enough. */
.occ-asg-page :is(div, form):has(> h3) > h3.occ-asg-title ~ h3.occ-asg-title {
	margin-top: 30px;
	padding-top: 22px;
	padding-bottom: 0;
	border-bottom: 0;
}

.occ-asg-title-icon {
	display: flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: rgba(164, 30, 50, .08);
	color: #a41e32;
}

.occ-asg-title-icon .occ-asg-icon {
	width: 20px;
	height: 20px;
}

/* D-365: a count is grey, 12px and 20px high (canvas board 2, option 1). */
.occ-asg-count {
	display: inline-block;
	min-width: 20px;
	height: 20px;
	padding: 0 7px;
	box-sizing: border-box;
	border-radius: 10px;
	background: var(--occ-ui-fill);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	color: var(--occ-ui-text-2);
}

/* Rows inside a card sit on a faint band, so a white row still reads as a row. */
.occ-asg-section table:has(> thead) tbody td {
	background: #fcfcfe;
}

/* A search or filter bar inside a card is a tinted strip, not a second card. */
.occ-asg-section :is(.occ-temporary-staff-search, .occ-client-timesheets-filters, .occ-pay-periods-picker) {
	padding: 16px 18px;
	border: 0;
	background: #f5f7fc;
}

/* ----------------------------------------------------------- empty lists */

.occ-asg-empty {
	padding: 26px 20px 10px;
	text-align: center;
}

.occ-asg-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 0 14px;
	border-radius: 50%;
	background: #f5f7fc;
	color: #a41e32;
}

.occ-asg-empty-icon .occ-asg-icon {
	width: 30px;
	height: 30px;
}

.occ-asg-page .occ-asg-empty-text {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 500;
	color: #202124;
}

.occ-asg-page .occ-asg-empty-hint {
	max-width: 34em;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.55;
	color: #696969;
}

.occ-asg-page .occ-asg-empty-action {
	margin: 18px 0 0;
}

/*
 * Search, filter and picker forms stay one row (D-312). Inside a titled card
 * they sit under an h3, so the D-309 form grid reached them and stacked the
 * field over a full-width button. `form:is()` weighs as much as that rule's
 * heaviest branch, and this one comes later.
 */
.occ-asg-page form:is(.occ-temporary-staff-search, .occ-client-timesheets-filters, .occ-pay-periods-picker) {
	display: flex;
	max-width: none;
}

.occ-asg-page form:is(.occ-temporary-staff-search, .occ-client-timesheets-filters, .occ-pay-periods-picker) :is(input, select) {
	width: auto;
	min-width: 16em;
	max-width: 24em;
}

/* b10.542: room for the arrow, which a later padding rule had taken (Payroll Periods' rule). */
.occ-asg-page form:is(.occ-temporary-staff-search, .occ-client-timesheets-filters, .occ-pay-periods-picker) select {
	padding-right: 45px;
}

/*
 * D-313. A page without the company line under its title (My assignment, My
 * timesheets) still keeps its first card clear of the title.
 */
.occ-asg-page > h2 + :is(div, form, section) {
	margin-top: 25px;
}

/*
 * The worker's "Start timesheet" choices: one full-width row each, words to the
 * left and an arrow to the right, with space between them, so each reads as
 * its own choice rather than one block of text. The plus on a lone main button
 * is now only for adding something (`occ-asg-add`); "Go to my timesheets" is
 * filled but carries no plus.
 */
.occ-asg-page .occ-ts-employee-start > form {
	display: block;
	max-width: none;
	margin: 0 0 12px;
}

.occ-asg-page .occ-ts-employee-start > form:last-child {
	margin-bottom: 0;
}

.occ-asg-page .occ-ts-employee-start > form > button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	padding: 16px 20px;
	border-color: #ecedf2;
	background: #fcfcfe;
	text-align: left;
	font-size: 15px;
	font-weight: 500;
	color: #202124;
}

.occ-asg-page .occ-ts-employee-start > form > button::after {
	content: "\203A";
	font-size: 22px;
	line-height: 1;
	color: #a41e32;
}

.occ-asg-page .occ-ts-employee-start > form > button:is(:hover, :focus) {
	border-color: #a41e32;
	background: #fff;
	color: #a41e32;
}

/* =========================================================================
 * D-314: the Employee's timesheet lists every day of the payroll period.
 *
 * One line per day, grouped in weeks, with the day's name in the first cell.
 * The extra details (an interrupted break, overtime, a stat holiday, a note)
 * are small switches; each one's fields open only while it is ticked, by CSS
 * alone, so this works with or without the script. The script adds live
 * hours, extra shifts at once, "Same as the day before" and one break for
 * every day; its buttons are hidden until it has loaded (`occ-js`).
 * ========================================================================= */

/* The hidden first button that answers the Enter key with Save. */
.occ-asg-page .occ-ts-default-submit {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.occ-asg-page .occ-js-only {
	display: none;
}

.occ-js .occ-asg-page .occ-js-only {
	display: inline-flex;
}

/* The timesheet form is a table, not a column of fields: the D-309 form grid and its 760px limit are not for it. */
.occ-asg-page form.occ-ts-employee-form {
	display: block;
	max-width: none;
}

.occ-asg-page .occ-ts-help {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: #4a4a4a;
}

.occ-asg-page .occ-ts-live .occ-asg-stats {
	gap: 20px;
	margin-bottom: 20px;
}

/* b10.550: "40 h 00 min" on one line; four tiles in a row left it wrapping. */
.occ-asg-page .occ-ts-live .occ-asg-stat-value {
	font-size: 24px;
	white-space: nowrap;
}

.occ-js .occ-asg-page div.occ-ts-bulk {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 14px;
	margin: 0 0 16px;
	padding: 16px 18px;
	border-radius: 8px;
	background: #f5f7fc;
}

.occ-asg-page .occ-ts-bulk .occ-ts-bulk-title {
	flex: 0 0 100%;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #202124;
}

.occ-asg-page .occ-ts-bulk label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: #4a4a4a;
}

.occ-asg-page .occ-ts-bulk :is(input, select) {
	width: 150px;
	min-width: 0;
	height: var(--occ-ui-field-h);
}

.occ-asg-page .occ-ts-bulk input[type="number"] {
	width: 100px;
}

.occ-asg-page .occ-ts-bulk select {
	width: 230px;
}

.occ-asg-page .occ-ts-bulk .button {
	height: var(--occ-ui-field-h);
	padding: 0 22px;
}

.occ-asg-page .occ-ts-bulk .occ-asg-sub {
	flex: 0 0 100%;
	margin: 0;
}

.occ-asg-page .occ-ts-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.occ-asg-page table.occ-ts-period {
	min-width: 860px;
}

.occ-asg-page .occ-ts-period tbody tr > :is(th, td) {
	vertical-align: top;
}

/* The week's own heading row: a label and the week's hours, not a line. */
.occ-asg-page .occ-ts-period tr.occ-ts-week-head > th {
	padding: 20px 6px 4px;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--occ-ui-text);
	text-align: left;
}

.occ-asg-page .occ-ts-week-total {
	float: right;
	font-weight: 600;
	color: #202124;
}

/* The day's name, as the row's first cell. */
.occ-asg-page .occ-ts-period th.occ-ts-day {
	width: 110px;
	padding: 14px 12px 12px 16px;
	border: 1px solid #ecedf2;
	border-right: 0;
	border-radius: 8px 0 0 8px;
	background: #fcfcfe;
	font-size: 14px;
	font-weight: 600;
	color: #202124;
	white-space: nowrap;
}

.occ-asg-page .occ-ts-period tr.is-extra th.occ-ts-day {
	font-weight: 400;
}

.occ-asg-page .occ-ts-period tr.occ-ts-shift > td {
	padding: 8px 10px;
}

.occ-asg-page .occ-ts-period .occ-ts-time input {
	width: 118px;
	min-width: 0;
}

.occ-asg-page .occ-ts-period .occ-ts-break input {
	width: 78px;
	min-width: 0;
}

.occ-asg-page .occ-ts-period td.occ-ts-net {
	padding-top: 18px;
	font-weight: 600;
	color: #202124;
	white-space: nowrap;
}

/* The switches: small pills, filled while ticked. */
.occ-asg-page .occ-ts-extras {
	min-width: 220px;
}

.occ-asg-page .occ-ts-extras label.occ-ts-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 2px 4px 4px 0;
	padding: 5px 10px;
	border: 1px solid #ecedf2;
	border-radius: 20px;
	background: #fff;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	color: #4a4a4a;
	cursor: pointer;
}

.occ-asg-page .occ-ts-extras label.occ-ts-toggle input[type="checkbox"] {
	width: 14px;
	height: 14px;
	margin: 0;
}

/* D-394: a ticked extra is chosen: navy, not burgundy. */
.occ-asg-page .occ-ts-extras label.occ-ts-toggle:has(input:checked) {
	border-color: var(--occ-ui-chosen-line);
	background: var(--occ-ui-chosen-bg);
	color: var(--occ-ui-chosen-text);
}

/* Each switch's fields open only while it is ticked. */
.occ-asg-page .occ-ts-fields {
	display: none;
}

.occ-asg-page .occ-ts-shift:has(.occ-ts-int-toggle:checked) .occ-ts-int-fields,
.occ-asg-page .occ-ts-shift:has(.occ-ts-ot-toggle:checked) .occ-ts-ot-fields,
.occ-asg-page .occ-ts-shift:has(.occ-ts-hol-toggle:checked) .occ-ts-hol-fields,
.occ-asg-page .occ-ts-shift:has(.occ-ts-note-toggle:checked) .occ-ts-note-fields {
	display: grid;
	gap: 10px;
	margin-top: 8px;
	padding: 10px 12px;
	/* D-342: outlined all round, no edge thicker than the others. */
	border: 1px solid #ecedf2;
	border-radius: 6px;
	background: #fff;
}

/* D-320: a label above each box and a hint under the hours, so the form reads while typing. */
.occ-asg-page .occ-ts-fields label.occ-ts-field {
	display: block;
	margin: 0;
	white-space: normal;
}

.occ-asg-page .occ-ts-field-label {
	display: block;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: #202124;
}

.occ-asg-page .occ-ts-field-hint {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.35;
	color: #696969;
}

.occ-asg-page .occ-ts-period .occ-ts-fields .occ-ts-field--hours input {
	max-width: 120px;
	font-variant-numeric: tabular-nums;
}

.occ-asg-page .occ-ts-period .occ-ts-fields :is(input, textarea) {
	width: 100%;
	max-width: none;
	height: 38px;
	font-size: 13px;
}

.occ-asg-page .occ-ts-period .occ-ts-fields textarea {
	height: 60px;
	min-height: 60px;
}

.occ-asg-page .occ-ts-period td.occ-ts-actions {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

.occ-asg-page .occ-ts-period td.occ-ts-actions .button {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 0 6px;
	padding: 7px 12px;
	font-size: 12px;
}

.occ-js .occ-asg-page .occ-ts-period td.occ-ts-actions .occ-js-only {
	display: flex;
}

.occ-asg-page .occ-ts-period td.occ-ts-actions .button:last-child {
	margin-bottom: 0;
}

.occ-asg-page .occ-ts-other tr.occ-ts-week-head > th {
	color: #b32d2e;
}

.occ-asg-page p.occ-ts-save {
	margin: 20px 0 24px;
}

/* =========================================================================
 * D-315: overtime detection on the timesheet, when it is turned on.
 *
 * A grey note says what counts as overtime; it turns amber while some of it is
 * not claimed, and red when a claim is required before submitting. A day over
 * the daily limit gets a small amber label above its switches.
 * ========================================================================= */

.occ-asg-page .occ-ts-ot-check {
	margin: 0 0 16px;
	padding: 14px 18px;
	/* D-342: outlined all round, no edge thicker than the others. */
	border: 1px solid var(--occ-ui-field-border);
	border-radius: 8px;
	background: #f5f7fc;
	font-size: 14px;
	color: #202124;
}

.occ-asg-page .occ-ts-ot-check.has-short {
	border-color: #ffb900;
	background: rgba(255, 185, 0, .1);
}

.occ-asg-page .occ-ts-ot-check.is-required.has-short {
	border-color: #dc3232;
	background: rgba(220, 50, 50, .07);
}

.occ-asg-page .occ-ts-ot-rule {
	margin: 0;
}

.occ-asg-page .occ-ts-ot-lines {
	margin: 8px 0 0 1.25em;
	padding: 0;
	font-weight: 600;
}

.occ-asg-page .occ-ts-ot-lines:empty {
	display: none;
}

.occ-asg-page .occ-ts-ot-hint {
	display: inline-block;
	margin: 0 0 6px;
	padding: 3px 10px;
	border-radius: 20px;
	background: rgba(255, 185, 0, .18);
	font-size: 12px;
	font-weight: 600;
	color: #8a5a00;
}

.occ-asg-page .occ-ts-ot-hint:empty {
	display: none;
}

/* ------------------------------------------------ D-317: day by day */

.occ-js .occ-asg-page div.occ-ts-mode {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
	margin: 0 0 18px;
	padding: 4px;
	box-sizing: border-box;
	border-radius: 8px;
	background: #f5f7fc;
}

.occ-asg-page .occ-ts-mode-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px 8px; /* b10.690: Figtree sits high; the text 1px lower centres its capitals. */
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #4a4a4a;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
}

.occ-asg-page .occ-ts-mode-btn .occ-asg-icon {
	width: 18px;
	height: 18px;
}

.occ-asg-page .occ-ts-mode-btn[aria-pressed="true"] {
	/* b10.550, D-365: the segmented control's white tile, ink text; it was burgundy. */
	background: var(--occ-ui-white);
	color: var(--occ-ui-text);
	box-shadow: var(--occ-ui-tile-shadow);
}

.occ-asg-page :is(.occ-ts-mode-btn, .occ-ts-chip, .occ-ts-review-day):focus-visible {
	outline: 2px solid var(--occ-ui-focus-ring);
	outline-offset: 2px;
}

/* The guided pieces show only while guided. */
.occ-js .occ-asg-page div.occ-ts-guide {
	display: block;
	margin: 0 0 16px;
}

.occ-js .occ-asg-page form:not(.is-guided) :is(div.occ-ts-guide, div.occ-ts-guide-nav, div.occ-ts-review),
.occ-js .occ-asg-page form.is-guided:not(.is-review) div.occ-ts-review,
.occ-js .occ-asg-page form.is-guided.is-review div.occ-ts-guide-nav,
.occ-js .occ-asg-page form.is-guided div.occ-ts-bulk {
	display: none;
}

.occ-asg-page ol.occ-ts-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.occ-asg-page ol.occ-ts-chips > li {
	margin: 0;
	padding: 0;
}

.occ-asg-page .occ-ts-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	height: 56px;
	padding: 4px 8px;
	box-sizing: border-box;
	border: 1px solid #ecedf2;
	border-radius: 8px;
	background: #fff;
	color: #202124;
	line-height: 1.15;
	cursor: pointer;
}

.occ-asg-page .occ-ts-chip:hover {
	border-color: var(--occ-ui-faint);
}

.occ-asg-page .occ-ts-chip-day {
	font-size: 12px;
	color: var(--occ-ui-text-3);
}

.occ-asg-page .occ-ts-chip-date {
	font-size: 16px;
	font-weight: 600;
}

.occ-asg-page .occ-ts-chip.is-worked {
	border-color: rgba(52, 168, 83, .45);
	background: rgba(52, 168, 83, .1);
}

.occ-asg-page .occ-ts-chip.is-worked .occ-ts-chip-day {
	color: #1e7e34;
}

.occ-asg-page .occ-ts-chip.is-off {
	background: #f5f7fc;
	color: #8a8a8a;
}

.occ-asg-page .occ-ts-chip.is-current {
	border-color: var(--occ-ui-chosen-line);
	box-shadow: inset 0 -3px 0 var(--occ-ui-chosen-line);
}

.occ-asg-page .occ-ts-chip--review .occ-asg-icon {
	width: 15px;
	height: 15px;
}

.occ-asg-page .occ-ts-chip--review .occ-ts-chip-date {
	font-size: 13px;
}

.occ-asg-page .occ-ts-guide-progress {
	margin: 0 0 2px;
	font-size: 13px;
	color: #696969;
}

.occ-asg-page h4.occ-ts-guide-day {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: #202124;
}

.occ-asg-page h4.occ-ts-guide-day:focus {
	outline: 0;
}

.occ-asg-page .occ-ts-guide-ask {
	display: none;
}

.occ-asg-page form.is-guided.is-asking .occ-ts-guide-ask {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	padding: 22px;
	border: 1px solid #ecedf2;
	border-radius: 8px;
	background: #fcfcfe;
}

.occ-asg-page .occ-ts-guide-ask p {
	flex: 0 0 100%;
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 500;
}

/* One day's lines at a time; nothing of the table while asking or on the last step. */
.occ-asg-page form.is-guided .occ-ts-period tr.occ-ts-week-head,
.occ-asg-page form.is-guided .occ-ts-period tr.occ-ts-shift:not(.is-current),
.occ-asg-page form.is-guided:is(.is-asking, .is-review) div.occ-ts-table-wrap,
.occ-asg-page form.is-guided:not(.is-review) fieldset {
	display: none;
}

.occ-js .occ-asg-page form.is-guided div.occ-ts-guide-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
}

.occ-asg-page .occ-ts-guide-nav .occ-ts-guide-clear {
	margin-left: auto;
}

.occ-asg-page form.is-asking .occ-ts-guide-nav :is(.occ-ts-guide-clear, [data-guide-next]) {
	display: none;
}

.occ-js .occ-asg-page form.is-guided.is-review div.occ-ts-review {
	display: block;
	margin: 0 0 20px;
}

.occ-asg-page .occ-ts-review-intro {
	margin: 0 0 12px;
	font-size: 14px;
	color: #4a4a4a;
}

.occ-asg-page ul.occ-ts-review-days {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid #ecedf2;
	border-radius: 8px;
	list-style: none;
}

.occ-asg-page ul.occ-ts-review-days > li {
	margin: 0;
	padding: 0;
	border-top: 1px solid #ecedf2;
}

.occ-asg-page ul.occ-ts-review-days > li:first-child {
	border-top: 0;
}

.occ-asg-page button.occ-ts-review-day {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	width: 100%;
	padding: 12px 16px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #202124;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

.occ-asg-page button.occ-ts-review-day:hover {
	background: #f5f7fc;
}

.occ-asg-page .occ-ts-review-label {
	flex: 1 1 auto;
	font-weight: 500;
}

.occ-asg-page .occ-ts-review-value {
	font-variant-numeric: tabular-nums;
}

.occ-asg-page li.is-off .occ-ts-review-value {
	color: #8a8a8a;
}

.occ-asg-page li.is-incomplete .occ-ts-review-value {
	font-weight: 500;
	color: #d93025;
}

.occ-asg-page .occ-ts-review-ot {
	flex: 0 0 100%;
	font-size: 13px;
	color: #b06a00;
}

/* ------------------------------ D-318: stat holidays and what to fix */

.occ-asg-page .occ-ts-chip {
	position: relative;
}

.occ-asg-page .occ-ts-chip-stat {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #a41e32;
}

.occ-asg-page .occ-ts-period .occ-ts-stat-day {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: #a41e32;
}

.occ-asg-page p.occ-ts-guide-stat {
	margin: -6px 0 14px;
	padding: 10px 14px;
	/* D-342: outlined all round, no edge thicker than the others. */
	border: 1px solid rgba(164, 30, 50, .3);
	border-radius: 6px;
	background: rgba(164, 30, 50, .06);
	font-size: 14px;
	line-height: 1.5;
	color: #4a4a4a;
}

.occ-asg-page p.occ-ts-guide-stat[hidden] {
	display: none;
}

.occ-asg-page .occ-ts-review-issue {
	flex: 0 0 100%;
	font-size: 13px;
}

.occ-asg-page .occ-ts-review-issue.is-fix {
	font-weight: 500;
	color: #d93025;
}

.occ-asg-page .occ-ts-review-issue.is-check {
	color: #b06a00;
}

.occ-asg-page .occ-ts-review-summary {
	margin: 0 0 16px;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
}

.occ-asg-page .occ-ts-review-summary.is-clear {
	background: rgba(52, 168, 83, .1);
	color: #1e7e34;
}

.occ-asg-page .occ-ts-review-summary.has-check {
	background: rgba(249, 171, 0, .12);
	color: #7a4a00;
}

.occ-asg-page .occ-ts-review-summary.has-fix {
	background: rgba(217, 48, 37, .08);
	color: #a1261c;
}

.occ-asg-page .occ-ts-review-summary-head {
	margin: 0;
	font-weight: 600;
}

.occ-asg-page .occ-ts-review-summary ul {
	margin: 8px 0 0;
	padding-left: 18px;
}

.occ-asg-page .occ-ts-review-summary li {
	margin: 2px 0;
}

.occ-asg-page .occ-ts-review-summary li.is-check {
	color: #7a4a00;
}

.occ-asg-page button.occ-ts-review-go {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* --------------------------------------- D-319: what approvers look at */

.occ-asg-page .occ-ts-stat-day {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: #a41e32;
}

.occ-asg-page .occ-ts-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* D-365 build 2: drawn as the dot chip by occ-ui.css; only the tone is set here. */

.occ-asg-page .occ-ts-flag--note {
	--occ-ui-chip-dot: var(--occ-ui-dot-navy);
}

.occ-asg-page .occ-ts-flag--check {
	--occ-ui-chip-dot: var(--occ-ui-dot-amber);
}

.occ-asg-page .occ-ts-lookbox {
	margin: 0 0 18px;
	padding: 14px 18px;
	/* D-342: outlined all round, no edge thicker than the others. */
	border: 1px solid #1967d2;
	border-radius: 8px;
	background: rgba(25, 103, 210, .06);
	font-size: 14px;
	line-height: 1.5;
	color: #202124;
}

.occ-asg-page .occ-ts-lookbox.has-check {
	border-color: #e08600;
	background: rgba(249, 171, 0, .1);
}

.occ-asg-page .occ-ts-lookbox.is-clear {
	border-color: #34a853;
	background: rgba(52, 168, 83, .08);
	color: #1e7e34;
}

.occ-asg-page .occ-ts-lookbox-head {
	margin: 0;
	font-weight: 600;
}

.occ-asg-page .occ-ts-lookbox-head span {
	margin-left: 6px;
	font-weight: 400;
	color: #696969;
}

.occ-asg-page .occ-ts-lookbox ul {
	margin: 8px 0 0;
	padding-left: 18px;
}

.occ-asg-page .occ-ts-lookbox li {
	margin: 3px 0;
}

.occ-asg-page .occ-ts-lookbox li.is-check {
	color: #7a4a00;
}

/* D-378: stat holiday pay is information, not something to check: grey, with an info icon. */
.occ-asg-page .occ-ts-lookbox.occ-ts-statpay {
	display: flex;
	gap: 12px;
	border-color: var(--occ-ui-border, #d0d5dd);
	background: var(--occ-ui-fill-soft, #f9fafb);
	color: #202124;
}

.occ-asg-page .occ-ts-statpay-ico {
	flex: 0 0 auto;
	margin-top: 1px;
	color: #696969;
}

.occ-asg-page .occ-ts-statpay-body {
	flex: 1 1 auto;
	min-width: 0;
}

.occ-asg-page .occ-ts-statpay .occ-ts-statrules {
	border-top-color: var(--occ-ui-border, #d0d5dd);
}

/* D-377: the average day under each stat holiday, and the rules in a fold. */
.occ-asg-page .occ-ts-statavg {
	color: #696969;
}

.occ-asg-page .occ-ts-statrules {
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px solid rgba(25, 103, 210, .25);
}

.occ-asg-page .occ-ts-statrules > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	list-style: none;
	font-weight: 600;
	color: #1967d2;
	cursor: pointer;
}

.occ-asg-page .occ-ts-statrules > summary::-webkit-details-marker {
	display: none;
}

.occ-asg-page .occ-ts-statrules > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.occ-asg-page .occ-ts-statrules[open] > summary::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.occ-asg-page .occ-ts-statrules > summary:focus-visible {
	outline: 2px solid #1967d2;
	outline-offset: 2px;
}

.occ-asg-page .occ-ts-statrules p {
	margin: 8px 0 0;
}

.occ-asg-page tr.occ-ts-flagged > td {
	background: rgba(25, 103, 210, .05);
}

.occ-asg-page tr.occ-ts-flagged.is-check > td {
	background: rgba(249, 171, 0, .1);
}

/* D-342: a flagged row is tinted rather than marked on its left edge. */
.occ-asg-page tr.occ-ts-flagged > td {
	background: rgba(25, 103, 210, .06);
}

.occ-asg-page tr.occ-ts-flagged.is-check > td {
	background: rgba(224, 134, 0, .08);
}

/* ------------------------------------------- D-321: no days ahead of today */

.occ-asg-page .occ-ts-chip--later {
	border-style: dashed;
	background: transparent;
	color: #8a8a8a;
	cursor: default;
}

.occ-asg-page .occ-ts-chip--later:hover {
	border-color: #ecedf2;
}

.occ-asg-page .occ-ts-chip.is-future,
.occ-asg-page .occ-ts-chip.is-future.is-worked {
	border: 1px dashed #d93025;
	background: rgba(217, 48, 37, .06);
	color: #a1261c;
}

.occ-asg-page .occ-ts-chip.is-future .occ-ts-chip-day {
	color: #d93025;
}

.occ-asg-page .occ-ts-chip.is-future.is-current {
	box-shadow: inset 0 -3px 0 #d93025;
}

.occ-asg-page .occ-ts-later {
	margin: 10px 0 0;
	font-size: 13px;
	color: #696969;
}

.occ-asg-page .occ-ts-period .occ-ts-future-day {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 600;
	color: #d93025;
}

.occ-asg-page .occ-ts-early {
	margin: 0;
	padding: 12px 14px;
	border-radius: 6px;
	background: #f5f7fc;
	font-size: 14px;
	line-height: 1.5;
	color: #4a4a4a;
}

/* ----------------------------- D-322: deciding on the Timesheets page */

/* D-365 build 3: "Approve or return" is the one primary action on the row, small. */
.occ-asg-page a.occ-ct-yours {
	display: inline-flex;
	align-items: center;
	margin-top: 4px;
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--occ-ui-brand);
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.occ-asg-page form.occ-ct-decide-form {
	display: grid;
	gap: 18px;
	max-width: 640px;
}

.occ-asg-page .occ-ct-decide-approve {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.occ-asg-page .occ-ct-decide-return {
	display: grid;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid #ecedf2;
}

.occ-asg-page .occ-ct-decide-return label {
	font-size: 14px;
	font-weight: 500;
}

.occ-asg-page .occ-ct-decide-return .button {
	justify-self: start;
}

.occ-asg-page :is(.occ-ct-decided, .occ-ct-decide-error) {
	margin: 0 0 14px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	border: 1px solid var(--occ-ui-green-line);
}

.occ-asg-page .occ-ct-decided {
	background: var(--occ-ui-green-soft);
	color: var(--occ-ui-green);
}

.occ-asg-page .occ-ct-decide-error {
	background: var(--occ-ui-red-soft);
	color: var(--occ-ui-red-text);
	border-color: var(--occ-ui-red-line);
}

/* ------------------------------------ D-325: agency list and PDF download */

.occ-asg-page p.occ-ct-pdf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 16px;
}

/* --------------------------------- D-326: the Timesheets list as cards */

.occ-asg-page ul.occ-ct-cards {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-asg-page li.occ-client-timesheets-row {
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	background: #fff;
}

.occ-asg-page li.occ-client-timesheets-row:hover {
	border-color: #d9dbe4;
}

.occ-asg-page .occ-ct-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 16px;
}

.occ-asg-page .occ-ct-card-who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.occ-asg-page a.occ-ct-card-name {
	font-size: 16px;
	font-weight: 600;
	color: #202124;
}

.occ-asg-page .occ-ct-card-meta {
	font-size: 13px;
	color: #696969;
}

/* D-365 build 2: drawn as the dot chip by occ-ui.css; only the tone is set here. */

.occ-asg-page .occ-ct-status--waiting {
	--occ-ui-chip-dot: var(--occ-ui-dot-amber);
}

.occ-asg-page .occ-ct-status--returned {
	--occ-ui-chip-dot: var(--occ-ui-dot-red);
}

.occ-asg-page .occ-ct-status--approved {
	--occ-ui-chip-dot: var(--occ-ui-dot-green);
}

.occ-asg-page .occ-ct-status--other {
	--occ-ui-chip-dot: var(--occ-ui-dot-grey);
}

.occ-asg-page .occ-ct-card-body {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 36px;
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid #f0f1f5;
}

.occ-asg-page .occ-ct-card-fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.occ-asg-page .occ-ct-card-flags {
	flex: 1 1 220px;
}

.occ-asg-page .occ-ct-card-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--occ-ui-muted);
}

.occ-asg-page .occ-ct-card-value {
	font-size: 15px;
	font-weight: 500;
	color: #202124;
}

.occ-asg-page .occ-ct-card-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 12px 0 0;
}

.occ-asg-page .occ-ct-card-trail {
	font-size: 12px;
	line-height: 1.5;
	color: #8a8a8a;
}

.occ-asg-page .occ-ct-card-sep {
	margin: 0 4px;
}

.occ-asg-page .occ-ct-card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.occ-asg-page .occ-ct-card-actions .button {
	margin: 0;
	padding: 6px 16px;
	font-size: 13px;
	white-space: nowrap;
}

.occ-asg-page .occ-ct-card-actions a.occ-ct-pdf-link {
	margin-left: 0;
	border-radius: 6px;
	font-size: 13px;
}

/* ------------------------- D-327: tighter cards, labels beside values */

.occ-asg-page ul.occ-ct-cards {
	gap: 8px;
}

.occ-asg-page li.occ-client-timesheets-row {
	padding: 10px 16px;
}

.occ-asg-page .occ-ct-card-head {
	align-items: center;
	gap: 4px 12px;
}

.occ-asg-page .occ-ct-card-who {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
}

.occ-asg-page a.occ-ct-card-name {
	font-size: 15px;
}

.occ-asg-page .occ-ct-card-meta {
	font-size: 12px;
}


.occ-asg-page .occ-ct-card-body {
	align-items: baseline;
	gap: 4px 24px;
	margin: 6px 0 0;
	padding: 0;
	border-top: 0;
}

.occ-asg-page .occ-ct-card-fact {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
}

.occ-asg-page .occ-ct-card-flags {
	flex: 0 1 auto;
}

.occ-asg-page .occ-ct-card-label {
	font-size: 12px;
}

.occ-asg-page .occ-ct-card-value {
	font-size: 14px;
}

.occ-asg-page .occ-ct-card-fact .occ-asg-sub {
	font-size: 12px;
	color: #8a8a8a;
}

.occ-asg-page .occ-ct-card-fact .occ-asg-sub + .occ-asg-sub::before {
	content: "\00b7\00a0";
}

.occ-asg-page .occ-ct-card-foot {
	gap: 6px 12px;
	margin: 6px 0 0;
}

.occ-asg-page .occ-ct-card-actions {
	gap: 6px;
}

.occ-asg-page .occ-ct-card-actions .button,
.occ-asg-page .occ-ct-card-actions a.occ-ct-pdf-link {
	padding: 3px 12px;
	font-size: 12px;
	line-height: 1.6;
}

/* -------------- D-328: one timesheet: fact grid, approval record, entries */

.occ-asg-page .occ-ct-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 14px;
}

.occ-asg-page .occ-ct-bar-note {
	flex: 1 1 auto;
	font-size: 13px;
	color: #8a8a8a;
}

.occ-asg-page .occ-ct-bar .occ-ct-pdf-link {
	margin: 0;
	padding: 5px 14px;
	font-size: 13px;
	border-radius: 6px;
}

.occ-asg-page dl.occ-ct-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px 24px;
	margin: 0;
	padding: 14px 16px;
	border-radius: 8px;
	background: #f8f9fb;
}

.occ-asg-page dl.occ-ct-facts > div,
.occ-asg-page dl.occ-ct-pairs > div {
	min-width: 0;
}

.occ-asg-page .occ-ct-facts dt {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 500;
	color: var(--occ-ui-muted);
}

.occ-asg-page .occ-ct-facts dd {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: #202124;
	overflow-wrap: anywhere;
}

.occ-asg-page .occ-ct-dd-sub {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	font-weight: 400;
	color: #8a8a8a;
}

/* The approval record: two groups of label and value pairs. */
.occ-asg-page .occ-ct-record-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px 32px;
}

.occ-asg-page .occ-ct-record-group h4 {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--occ-ui-text);
}

.occ-asg-page dl.occ-ct-pairs {
	margin: 0;
}

.occ-asg-page dl.occ-ct-pairs > div {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid #f0f1f5;
}

.occ-asg-page dl.occ-ct-pairs > div:last-child {
	border-bottom: 0;
}

.occ-asg-page .occ-ct-pairs dt {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: #696969;
}

.occ-asg-page .occ-ct-pairs dd {
	margin: 0;
	font-size: 13px;
	color: #202124;
	overflow-wrap: anywhere;
}

.occ-asg-page .occ-ct-mono,
.occ-asg-page code.occ-ct-hash {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
}

.occ-asg-page code.occ-ct-hash {
	padding: 1px 6px;
	border-radius: 4px;
	background: #f5f7fc;
	color: #202124;
	cursor: help;
}

.occ-asg-page .occ-ct-hash-state {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
}

.occ-asg-page .occ-ct-hash-state.is-match {
	color: #1e7e34;
}

.occ-asg-page .occ-ct-hash-state.is-changed {
	color: #a1261c;
}

/* Entries: a plain table. Beats the card-row list rules by one class. */
.occ-asg-page .occ-ct-entries-wrap table.occ-ct-entries {
	width: 100%;
	margin: 0;
	border: 1px solid #ecedf2;
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	font-size: 13px;
}

.occ-asg-page .occ-ct-entries-wrap table.occ-ct-entries :is(th, td) {
	padding: 8px 12px;
	border: 0;
	border-radius: 0;
	vertical-align: top;
	text-align: left;
	line-height: 1.4;
}

.occ-asg-page .occ-ct-entries-wrap table.occ-ct-entries thead th {
	border-bottom: 1px solid #e3e5ec;
	background: var(--occ-ui-fill-soft);
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-text-3);
}

.occ-asg-page .occ-ct-entries-wrap table.occ-ct-entries tbody td {
	background: #fff;
	color: #202124;
	font-size: 13px;
}

.occ-asg-page .occ-ct-entries-wrap table.occ-ct-entries tbody tr:nth-child(even) > td {
	background: #fafbfd;
}

.occ-asg-page .occ-ct-entries-wrap table.occ-ct-entries tbody tr:hover > td {
	background: #f1f5fc;
}

.occ-asg-page .occ-ct-entries-wrap table.occ-ct-entries .occ-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.occ-asg-page .occ-ct-entries-wrap table.occ-ct-entries td.occ-ct-notes {
	min-width: 10em;
	color: #696969;
}

.occ-asg-page .occ-ct-entries-wrap table.occ-ct-entries tfoot :is(th, td) {
	border-top: 1px solid #e3e5ec;
	background: #f8f9fb;
	font-size: 13px;
	font-weight: 600;
	color: #202124;
}

.occ-asg-page .occ-ct-nil {
	color: #c4c7cf;
}

.occ-asg-page .occ-ct-cell-sub {
	display: block;
	font-size: 12px;
	color: #8a8a8a;
	white-space: normal;
}

/* Flags keep their colour over the stripes. */
.occ-asg-page .occ-ct-entries-wrap table.occ-ct-entries tbody tr.occ-ts-flagged > td {
	background: rgba(25, 103, 210, .05);
}

.occ-asg-page .occ-ct-entries-wrap table.occ-ct-entries tbody tr.occ-ts-flagged.is-check > td {
	background: rgba(249, 171, 0, .1);
}

@media (max-width: 600px) {
	.occ-asg-page dl.occ-ct-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 16px;
	}

	.occ-asg-page dl.occ-ct-pairs > div {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* ----------------------- D-330: the people and their assignments, one page */

/*
 * The switch between the two halves is a segmented control, not a second row
 * of underlined tabs: the panel inside the page has its own underlined tabs,
 * and two rows that look alike do not say which is which.
 */
.occ-asg-page .occ-asg-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 22px;
	padding: 4px;
	border: 1px solid #ecedf2;
	border-radius: 10px;
	background: #f5f7fc;
}

.occ-asg-page a.occ-asg-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: #4a4a4a;
	text-decoration: none;
}

.occ-asg-page .occ-asg-tab-count {
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	padding: 0 7px;
	border-radius: 10px;
	background: var(--occ-ui-line);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	color: var(--occ-ui-text-3);
	text-align: center;
}

/* D-365: the open tab is a white tile with ink text and a grey count. */
.occ-asg-page a.occ-asg-tab.is-current {
	background: var(--occ-ui-white);
	box-shadow: var(--occ-ui-tile-shadow);
	color: var(--occ-ui-text);
	font-weight: 600;
}

.occ-asg-page a.occ-asg-tab.is-current .occ-asg-tab-count {
	background: var(--occ-ui-line-soft);
	color: var(--occ-ui-text-2);
}

/* D-330: the way from the assignment form to the roster. */
.occ-asg-page p.occ-tst-add-note {
	margin: 0 0 14px;
}

/* AccessManager's panel sits inside this page, so it keeps the page's spacing. */
.occ-asg-page .occ-access {
	margin-top: 0;
}

/*
 * The page's own rule underlines a link on hover. The switch and the panel's
 * subsection links are not that kind of link: the switch shows the open half as
 * a raised pill, and the subsections carry their own underline.
 */
.occ-asg-page a.occ-asg-tab:is(:hover, :focus, :focus-visible),
.occ-asg-page .occ-access a.occ-access-nav-link:is(:hover, :focus, :focus-visible) {
	text-decoration: none;
}

.occ-asg-page a.occ-asg-tab:not(.is-current):is(:hover, :focus-visible) {
	background: var(--occ-ui-line-soft);
	color: var(--occ-ui-text);
}

.occ-asg-page a.occ-asg-tab:focus-visible,
.occ-asg-page .occ-access a.occ-access-nav-link:focus-visible {
	outline: 2px solid var(--occ-ui-focus-ring);
	outline-offset: -2px;
}

/*
 * The page's link colour (0,2,1) outranked the panel's sub-tabs, which were
 * burgundy. They read as the Profile tabs do: grey, ink on hover and when
 * current, the burgundy underline from access-manager-frontend.css (b10.536).
 */
.occ-asg-page .occ-access a.occ-access-nav-link {
	color: var(--occ-ui-text-3);
}

.occ-asg-page .occ-access a.occ-access-nav-link:is(:hover, :focus),
.occ-asg-page .occ-access a.occ-access-nav-link.is-current {
	color: var(--occ-ui-text);
}

/* ----------------------------------------------------------------- phones */

@media (max-width: 600px) {
	/* D-352: tiles on a phone are the dashboard's too, one to a row, from the rules above. */

	.occ-asg-page h3.occ-asg-title {
		font-size: 16px;
	}

	.occ-asg-page form:is(.occ-temporary-staff-search, .occ-client-timesheets-filters, .occ-pay-periods-picker) :is(input, select) {
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	/* D-314: on a phone each shift is a small card, not a table row. */
	.occ-asg-page table.occ-ts-period {
		min-width: 0;
	}

	.occ-asg-page table.occ-ts-period thead {
		display: none;
	}

	.occ-asg-page table.occ-ts-period,
	.occ-asg-page .occ-ts-period tbody,
	.occ-asg-page .occ-ts-period tr.occ-ts-week-head,
	.occ-asg-page .occ-ts-period tr.occ-ts-week-head > th {
		display: block;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-shift {
		display: grid;
		/*
		 * b10.682: two columns (Start and End, then Break), not three. At 390px a
		 * third of the card cut the times to "07:0" and pushed Break past the edge.
		 */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin: 0 0 10px;
		padding: 12px;
		border: 1px solid #ecedf2;
		border-radius: 8px;
		background: #fcfcfe;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-shift > :is(th, td) {
		display: block;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-shift > :is(th.occ-ts-day, td.occ-ts-extras, td.occ-ts-actions) {
		grid-column: 1 / -1;
		text-align: left;
	}

	.occ-asg-page .occ-ts-period .occ-ts-time input,
	.occ-asg-page .occ-ts-period .occ-ts-break input {
		width: 100%;
		min-width: 0;
	}

	/*
	 * b10.682 (measured as Aisha at 390px): the actions cell kept its desktop
	 * width of 1%, so "Add another shift" and "Same as the day before" were
	 * drawn as 20px boxes with their words spilling out, and the Break field
	 * ran past the card's edge. On a phone the two buttons sit side by side
	 * under the day and wrap when they must.
	 */
	.occ-asg-page .occ-ts-period tr.occ-ts-shift > td.occ-ts-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: auto;
		white-space: normal;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-shift > td.occ-ts-actions .button {
		width: auto;
		margin: 0;
	}

	.occ-asg-page .occ-ts-period td.occ-ts-net {
		grid-column: 1 / -1;
		padding: 0;
	}
}

/* -------------------------------------------------------- user dashboard */

/*
 * D-354, Philipp 2026-09-24: the User Dashboard per audience. OCC draws it in
 * place of WPJB's dashboard, inside the same dashboard template, so it takes
 * the full width and the tiles above (D-352, D-353). What is new here: the
 * "Go to" row, two columns of cards, and the rows inside a card.
 */
.occ-user-dashboard-company {
	margin: 0 0 25px;
	font-size: 14px;
	color: #696969;
}

/*
 * The "Go to" row never wraps (Philipp, 2026-09-24): the pills share the
 * width and shrink, a label too long for its share ends in an ellipsis, and
 * a phone scrolls the row sideways instead.
 */
.occ-asg-page .occ-ud-goto {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 30px;
	overflow-x: auto;
}

.occ-ud-goto-label {
	flex-shrink: 0;
	font-size: 13px;
	color: #696969;
}

/* b10.672: equal widths; sized by their words they came out uneven. */
.occ-asg-page a.occ-ud-pill {
	flex: 1 1 0;
	min-width: 0;
	padding: 10px 14px 8px; /* b10.686: Figtree sits high; 1px more above centres the capitals. */
	border: 1px solid #ecedf2;
	border-radius: 50px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	color: #202124;
}

/* A pill is a button, not a link in a sentence: no underline (Philipp, 2026-09-24). */
.occ-asg-page a.occ-ud-pill:is(:hover, :focus, :focus-visible) {
	border-color: #a41e32;
	color: #a41e32;
	text-decoration: none;
}

@media (max-width: 767px) {
	.occ-asg-page a.occ-ud-pill {
		flex: 0 0 auto;
	}
}

/* Two cards side by side from 992px: the wide one first. */
.occ-ud-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	margin: 0 0 30px;
}

@media (min-width: 992px) {
	.occ-ud-row {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: start;
	}

	/* A team member's: timesheets and company half and half, then the people across. */
	.occ-ud-row.occ-ud-row--even {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.occ-ud-row.occ-ud-row--full {
		grid-template-columns: minmax(0, 1fr);
	}
}

.occ-asg-page .occ-ud-row > .occ-asg-section {
	margin: 0;
}

/* The rows inside a card: a faint band each, as on the Timesheets cards. */
.occ-asg-page ul.occ-ud-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-asg-page li.occ-ud-item {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #ecedf2;
	border-radius: 8px;
	background: #fcfcfe;
}

.occ-ud-avatar {
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	/* b10.546, D-365: the standard's grey initials; they were burgundy. */
	background: var(--occ-ui-line-soft);
	font-size: 14px;
	font-weight: 600;
	color: var(--occ-ui-text-2);
}

.occ-ud-avatar--large {
	flex-basis: 56px;
	width: 56px;
	height: 56px;
	font-size: 18px;
}

.occ-ud-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.occ-ud-text strong {
	font-size: 15px;
	color: #202124;
}

.occ-ud-text > span {
	font-size: 13px;
	color: #696969;
}

.occ-ud-aside {
	flex-shrink: 0;
	font-size: 13px;
	white-space: nowrap;
	color: #696969;
}

.occ-asg-page .button.button-primary.occ-ud-action {
	flex-shrink: 0;
	padding: 11px 20px 9px; /* b10.690: Figtree sits high; the text 1px lower centres its capitals. */
	font-size: 14px;
}

.occ-asg-page p.occ-ud-more {
	margin: 16px 0 0;
	font-size: 14px;
	font-weight: 600;
	text-align: right;
}

.occ-asg-page p.occ-ud-note {
	margin: 12px 0 0;
	font-size: 14px;
	color: #696969;
}

/* The company card. */
.occ-ud-company-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
}

.occ-ud-company-head strong {
	font-size: 15px;
	color: #202124;
}

.occ-ud-logo {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border: 1px solid #ecedf2;
	border-radius: 8px;
	background: #fff;
}

.occ-asg-page dl.occ-ud-facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 6px 14px;
	margin: 0;
	font-size: 14px;
}

.occ-asg-page dl.occ-ud-facts dt {
	margin: 0;
	font-weight: 400;
	color: #696969;
}

.occ-asg-page dl.occ-ud-facts dd {
	margin: 0;
	overflow-wrap: anywhere;
	color: #202124;
}

/* A candidate on assignment: this period's timesheet, and the assignment as facts. */
.occ-ud-now-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.occ-ud-now-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	font-size: 14px;
}

.occ-ud-now-text .occ-ud-now-period {
	font-size: 20px;
	font-weight: 500;
	color: #202124;
}

/* b10.546, D-365: the state is the standard's dot chip (occ-ui-chip); this only places it. */
.occ-ud-state {
	align-self: flex-start;
}

.occ-asg-page p.occ-ud-now-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* Both buttons the same height: the quiet one takes the primary's padding. */
.occ-asg-page p.occ-ud-now-actions .button {
	padding: 15px 24px;
	font-size: 15px;
}

.occ-asg-page dl.occ-ud-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px 24px;
	margin: 0;
}

@media (min-width: 768px) {
	.occ-asg-page dl.occ-ud-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.occ-asg-page dl.occ-ud-grid dt {
	margin: 0 0 3px;
	font-size: 13px;
	font-weight: 400;
	color: #696969;
}

.occ-asg-page dl.occ-ud-grid dd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	overflow-wrap: anywhere;
	color: #202124;
}

@media (max-width: 600px) {
	.occ-asg-page li.occ-ud-item {
		flex-wrap: wrap;
	}

	.occ-asg-page .button.button-primary.occ-ud-action {
		width: 100%;
		text-align: center;
	}
}

/*
 * D-354, the agency's dashboard (b10.472). Its four tiles sit in one grid with
 * WPJB's Applications statistics, so they take four colours of their own that
 * stay in the theme's spectrum without repeating WPJB's blue, red, amber and
 * green (Philipp, 2026-09-24).
 */
.occ-asg-page .occ-asg-stat--lime {
	--occ-tone: #7cb342;
	--occ-tone-bg: rgba(124, 179, 66, .1);
}

.occ-asg-page .occ-asg-stat--cyan {
	--occ-tone: #12a4b6;
	--occ-tone-bg: rgba(18, 164, 182, .1);
}

.occ-asg-page .occ-asg-stat--purple {
	--occ-tone: #9334e6;
	--occ-tone-bg: rgba(147, 52, 230, .1);
}

.occ-asg-page .occ-asg-stat--pink {
	--occ-tone: #e52592;
	--occ-tone-bg: rgba(229, 37, 146, .1);
}

/* Eight tiles: four a row from 1200px, instead of one row of all of them. */
@media (min-width: 1200px) {
	.occ-ud-tiles--eight .occ-asg-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-columns: auto;
		grid-auto-flow: row;
	}
}

/* Needs attention: one compact line each (it wraps rather than cutting words), two columns on a wide screen. */
.occ-asg-page ul.occ-ud-attn {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1200px) {
	.occ-asg-page ul.occ-ud-attn {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.occ-asg-page li.occ-ud-attn-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin: 0;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid #ecedf2;
	border-radius: 8px;
}

.occ-ud-attn-count {
	/* b10.546, D-365: the meaning colours, as the stat tiles. */
	--occ-tone: var(--occ-ui-dot-navy);
	--occ-tone-bg: var(--occ-ui-blue-soft);
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 32px;
	padding: 2px 8px;
	border-radius: 8px;
	background: var(--occ-tone-bg);
	color: var(--occ-tone);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.occ-ud-attn-count--red {
	--occ-tone: var(--occ-ui-red-text);
	--occ-tone-bg: var(--occ-ui-red-soft);
}

.occ-ud-attn-count--amber {
	--occ-tone: #8a5a00;
	--occ-tone-bg: #fffaeb;
}

.occ-ud-attn-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.35;
	overflow-wrap: anywhere;
	color: #202124;
}

.occ-asg-page a.occ-ud-attn-action,
.occ-asg-page a.occ-ud-attn-action:is(:hover, :focus, :focus-visible) {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

/*
 * D-406: Applications and messages, under Needs attention's own lines. WPJB's
 * notifications one line each: a dot by kind, who and what, how long ago, an
 * x. Two columns on a wide screen, like the lines above.
 */
.occ-asg-page .occ-ud-msgs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.occ-asg-page .occ-ud-msgs-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.occ-asg-page .occ-ud-msgs-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--occ-ui-text-3, #475467);
}

.occ-asg-page .occ-ud-msgs-note {
	font-weight: 500;
	color: var(--occ-ui-muted, #667085);
}

.occ-asg-page .occ-ud-msgs-all {
	margin: 0;
}

.occ-asg-page button.occ-ud-msgs-dismiss-all,
.occ-asg-page button.occ-ud-msgs-dismiss-all:is(:hover, :focus) {
	min-height: 32px;
	margin: 0;
	padding: 4px 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: var(--occ-ui-text-3, #475467);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: underline;
	cursor: pointer;
}

.occ-asg-page ul.occ-ud-msgs-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1200px) {
	.occ-asg-page ul.occ-ud-msgs-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.occ-asg-page li.occ-ud-msg {
	--occ-ud-dot: var(--occ-ui-dot-navy, #2f5d95);
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 4px 4px 4px 12px;
	background: #fff;
	border: 1px solid #ecedf2;
	border-radius: 8px;
}

.occ-asg-page li.occ-ud-msg--msg {
	--occ-ud-dot: var(--occ-ui-dot-agency, #7a5af8);
}

.occ-asg-page li.occ-ud-msg--meet {
	--occ-ud-dot: var(--occ-ui-dot-amber, #dc9c00);
}

.occ-asg-page li.occ-ud-msg--mail,
.occ-asg-page li.occ-ud-msg--other {
	--occ-ud-dot: var(--occ-ui-dot-grey, #98a2b3);
}

.occ-asg-page .occ-ud-msg-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--occ-ud-dot);
}

.occ-asg-page .occ-ud-msg-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.35;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #202124;
}

.occ-asg-page .occ-ud-msg-text strong {
	font-weight: 600;
}

.occ-asg-page .occ-ud-msg-text a,
.occ-asg-page .occ-ud-msg-text a:is(:hover, :focus) {
	font-weight: 600;
	text-decoration: none;
}

.occ-asg-page .occ-ud-msg-when {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--occ-ui-muted, #667085);
	white-space: nowrap;
}

.occ-asg-page .occ-ud-msg-form {
	flex: 0 0 auto;
	margin: 0;
}

.occ-asg-page button.occ-ud-msg-x,
.occ-asg-page button.occ-ud-msg-x:is(:hover, :focus) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: var(--occ-ui-muted, #667085);
	cursor: pointer;
}

.occ-asg-page button.occ-ud-msg-x:hover {
	background: var(--occ-ui-fill, #f2f4f7);
	color: var(--occ-ui-text, #101828);
}

.occ-asg-page button.occ-ud-msg-x:focus-visible,
.occ-asg-page button.occ-ud-msgs-dismiss-all:focus-visible {
	outline: 2px solid var(--occ-ui-focus-ring, #2f5d95);
	outline-offset: 2px;
}

.occ-asg-page .occ-ud-msgs-none,
.occ-asg-page .occ-ud-msgs-more {
	margin: 0;
	font-size: 14px;
	color: var(--occ-ui-text-3, #475467);
}

.occ-asg-page .occ-ud-msgs-none {
	padding: 10px 12px;
	border: 1px dashed var(--occ-ui-border, #d0d5dd);
	border-radius: 8px;
}

.occ-asg-page .occ-ud-msgs-more a,
.occ-asg-page .occ-ud-msgs-more a:is(:hover, :focus) {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

/*
 * D-406 points 4 and 5 (b10.780): the job ad views chart (two thirds) and
 * Recent applicants (one third) side by side from 1000px, stacked below.
 * The chart is SVG from OCC_Analytics_Charts, as on the Analytics page.
 */
.occ-asg-page .occ-ud-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 25px;
	align-items: start;
}

@media (min-width: 1000px) {
	.occ-asg-page .occ-ud-split {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.occ-asg-page .occ-ud-split > .occ-asg-section {
	min-width: 0;
	margin: 0;
}

/* The heading's source tag, as on the Analytics page. */
.occ-asg-page .occ-ud-chart-src {
	margin-left: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--occ-ui-fill, #f2f4f7);
	color: var(--occ-ui-text-3, #475467);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

/* One row: the job picker with Show, then the day pills; it wraps on a narrow screen. */
.occ-asg-page .occ-ud-chart-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 16px;
}

.occ-asg-page form.occ-ud-chart-filter {
	display: flex;
	flex: 1 1 320px;
	gap: 8px;
	align-items: center;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.occ-asg-page .occ-ud-chart-field {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 360px;
	margin: 0;
}

.occ-asg-page .occ-ud-chart-field select {
	width: 100%;
	height: 36px;
	padding: 0 32px 0 10px;
	border: 1px solid var(--occ-ui-border, #d0d5dd);
	border-radius: 8px;
	background-color: #fff;
	color: var(--occ-ui-text, #101828);
	font-size: 13px;
}

.occ-asg-page button.occ-ud-chart-apply,
.occ-asg-page button.occ-ud-chart-apply:is(:hover, :focus) {
	flex: 0 0 auto;
	height: 36px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--occ-ui-border, #d0d5dd);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: var(--occ-ui-text-2, #344054);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.occ-asg-page button.occ-ud-chart-apply:hover {
	background: var(--occ-ui-fill, #f2f4f7);
}

/* The days as one segmented control, the chosen one in the selected blue. */
.occ-asg-page .occ-ud-chart-days {
	display: inline-flex;
	flex: 0 0 auto;
	overflow: hidden;
	border: 1px solid var(--occ-ui-border, #d0d5dd);
	border-radius: 8px;
}

.occ-asg-page a.occ-ud-chart-day,
.occ-asg-page a.occ-ud-chart-day:is(:hover, :focus) {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 12px;
	border-left: 1px solid var(--occ-ui-border, #d0d5dd);
	background: #fff;
	color: var(--occ-ui-text-2, #344054);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}

.occ-asg-page a.occ-ud-chart-day:first-child {
	border-left: 0;
}

.occ-asg-page a.occ-ud-chart-day:hover {
	background: var(--occ-ui-fill-soft, #f9fafb);
}

.occ-asg-page a.occ-ud-chart-day.is-current {
	background: var(--occ-ui-selected, #eef4fb);
	color: var(--occ-ui-navy, #1e3a5f);
	font-weight: 700;
}

.occ-asg-page dl.occ-ud-chart-figures {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0 0 10px;
}

.occ-asg-page dl.occ-ud-chart-figures > div {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.occ-asg-page .occ-ud-chart-figures dt {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--occ-ui-text-3, #475467);
}

.occ-asg-page .occ-ud-chart-figures dd {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--occ-ui-text, #101828);
}

.occ-asg-page .occ-ud-chart-delta {
	margin-left: 6px;
	font-size: 13px;
	font-weight: 600;
}

.occ-asg-page .occ-ud-chart-delta--up {
	color: var(--occ-ui-green, #067647);
}

.occ-asg-page .occ-ud-chart-delta--down {
	color: var(--occ-ui-red-text, #b42318);
}

.occ-asg-page .occ-ud-chart .occ-an-chart {
	margin: 0;
}

.occ-asg-page .occ-ud-chart .occ-an-svg {
	display: block;
	width: 100%;
	height: auto;
}

.occ-asg-page .occ-ud-chart .occ-an-axis {
	font-size: 12px;
	fill: var(--occ-ui-muted, #667085);
}

.occ-asg-page .occ-ud-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--occ-ui-text-3, #475467);
}

.occ-asg-page .occ-ud-chart-key {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.occ-asg-page .occ-ud-chart-key::before {
	content: "";
	width: 18px;
	height: 0;
	border-top: 3px solid #2f5d95;
	border-radius: 2px;
}

.occ-asg-page .occ-ud-chart-key--before::before {
	border-top: 2px dashed #c3cad5;
}

.occ-asg-page a.occ-ud-chart-more,
.occ-asg-page a.occ-ud-chart-more:is(:hover, :focus) {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.occ-asg-page .occ-ud-chart-none,
.occ-asg-page .occ-ud-recent-none {
	margin: 0;
	padding: 12px;
	border: 1px dashed var(--occ-ui-border, #d0d5dd);
	border-radius: 8px;
	font-size: 14px;
	color: var(--occ-ui-text-3, #475467);
}

/* Recent applicants: plain rows (mockup board 4 A). */
.occ-asg-page ul.occ-ud-recent-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-asg-page ul.occ-ud-recent-list > li {
	margin: 0;
	border-top: 1px solid #eaecf0;
}

.occ-asg-page ul.occ-ud-recent-list > li:first-child {
	border-top: 0;
}

.occ-asg-page .occ-ud-recent-row,
.occ-asg-page a.occ-ud-recent-row:is(:hover, :focus) {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 4px;
	color: #202124;
	text-decoration: none;
}

.occ-asg-page a.occ-ud-recent-row:hover {
	background: var(--occ-ui-fill-soft, #f9fafb);
}

.occ-asg-page .occ-ud-recent-ini {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--occ-ui-fill, #f2f4f7);
	color: var(--occ-ui-text-2, #344054);
	font-size: 13px;
	font-weight: 700;
}

.occ-asg-page .occ-ud-recent-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.occ-asg-page .occ-ud-recent-who {
	display: flex;
	gap: 6px;
	align-items: center;
	min-width: 0;
}

.occ-asg-page .occ-ud-recent-who strong {
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--occ-ui-text, #101828);
}

.occ-asg-page .occ-ud-recent-chip {
	flex: 0 0 auto;
	padding: 1px 7px;
	border-radius: 999px;
	background: #fffaeb;
	color: #8a5a00;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.occ-asg-page .occ-ud-recent-chip--approved {
	background: #ecfdf3;
	color: #067647;
}

.occ-asg-page .occ-ud-recent-chip--rejected {
	background: #fef3f2;
	color: #b42318;
}

.occ-asg-page .occ-ud-recent-job {
	overflow: hidden;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--occ-ui-text-3, #475467);
}

.occ-asg-page .occ-ud-recent-when {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--occ-ui-muted, #667085);
}

.occ-asg-page .occ-ud-recent-all {
	margin: 10px 0 0;
	font-size: 13px;
}

.occ-asg-page .occ-ud-recent-all a,
.occ-asg-page .occ-ud-recent-all a:is(:hover, :focus) {
	font-weight: 600;
	text-decoration: none;
}

/*
 * A long Go to row (the agency's nine): smaller pills that keep their whole
 * names. Where even these do not fit, the row scrolls sideways; it still
 * never wraps and never cuts a name short.
 */
.occ-asg-page .occ-ud-goto--many {
	gap: 6px;
}

.occ-asg-page .occ-ud-goto--many a.occ-ud-pill {
	flex: 1 0 auto;
	padding: 9px 9px 7px;
	font-size: 13px;
	text-overflow: clip;
}

/*
 * D-406 (b10.788): agency-dashboard.js works in place. The `hidden` lines,
 * notes and empty states stay hidden although their own rules set display;
 * a line being dismissed fades; the chart card dims while it loads; with the
 * script the job list redraws on its own, so Show goes.
 */
.occ-asg-page [data-occ-ud-attention] [hidden],
.occ-asg-page [data-occ-ud-chart] [hidden] {
	display: none !important;
}

.occ-asg-page li.occ-ud-msg.is-busy,
.occ-asg-page .occ-ud-msgs.is-busy .occ-ud-msgs-list {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.occ-asg-page .occ-ud-chart.is-loading > :not(h3) {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.occ-asg-page .occ-ud-chart.occ-ud-js button.occ-ud-chart-apply {
	display: none;
}

/* D-354, the available candidate's dashboard (b10.473). */
.occ-asg-page .occ-ud-status-body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px 16px;
}

.occ-asg-page .occ-ud-status-body p {
	flex: 1 1 320px;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #202124;
}

.occ-asg-page .occ-ud-progress {
	overflow: hidden;
	height: 8px;
	margin: 0 0 10px;
	border-radius: 50px;
	background: #ecedf2;
}

.occ-asg-page .occ-ud-progress-bar {
	display: block;
	height: 100%;
	border-radius: 50px;
	background: #1967d2;
}

.occ-asg-page p.occ-ud-progress-text {
	margin: 0 0 14px;
	font-size: 14px;
	color: #696969;
}

.occ-asg-page p.occ-ud-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
}

.occ-ud-chips-label {
	font-size: 14px;
	color: #696969;
}

/* D-365 build 2: drawn as the dot chip by occ-ui.css; only the tone is set here. */
.occ-ud-chip {
	--occ-ui-chip-dot: var(--occ-ui-dot-amber);
}

.occ-asg-page p.occ-ud-ready-actions {
	justify-content: flex-end;
}

/* =========================================================================
 * D-362, b10.513: the Clients page in the Current Temporary Staff layout
 *
 * The list and the panel are AccessManager's markup (`occ-staff-*` inside
 * `.occ-access`) and take its stylesheet. What follows is only what the page
 * adds: the heading row, the company facts, the phone box, the assignments
 * card and the edit form inside the panel. Colours and corners are the ones
 * these two stylesheets already use.
 * ========================================================================= */

/* The title, and the add button beside it. */
.occ-cc-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0 0 25px;
}

.occ-cc-head .occ-client-companies-agency,
.occ-cc-head .occ-asg-add {
	margin: 0;
}

/* Edit sits at the right of the client's name. */
.occ-cc-detail .occ-staff-who-text {
	flex: 1 1 auto;
}

.occ-access .occ-cc-detail .occ-cc-edit.occ-access-button {
	flex: 0 0 auto;
	align-self: flex-start;
}

/* The company's facts, two to a row, the long ones across. */
.occ-cc-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
	margin: 0;
}

.occ-cc-facts dt {
	font-size: 13px;
	font-weight: 400;
	color: #696969;
}

.occ-cc-facts dd {
	margin: 3px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: #202124;
}

.occ-cc-facts .occ-cc-facts-wide {
	grid-column: 1 / -1;
}

.occ-cc-facts dd.occ-cc-notes {
	font-weight: 400;
	white-space: pre-line;
}

/* The standard phone box (D-359): the flag and +1 in a grey segment, then the number. */
.occ-cc-phone {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--occ-ui-field-border);
	border-radius: 8px;
	font-weight: 400;
}

.occ-cc-phone-cc {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	background: #f5f7fc;
	border-right: 1px solid var(--occ-ui-field-border);
	font-size: 13px;
	font-weight: 600;
	color: #202124;
}

.occ-cc-phone-cc img {
	width: 20px;
	height: auto;
	margin: 0;
}

.occ-access a.occ-cc-phone-no {
	padding: 5px 10px;
	color: #202124;
	text-decoration: none;
}

.occ-access a.occ-cc-phone-no:hover,
.occ-access a.occ-cc-phone-no:focus {
	color: #a41e32;
}

/* Contacts, logins and worksites: a name with what they are, then a line. */
.occ-cc-people {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-cc-people li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	font-size: 14px;
}

.occ-cc-people-name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	font-weight: 700;
	color: #202124;
}

.occ-cc-people-name .occ-staff-quiet {
	font-weight: 400;
}

/* The assignments at this client: Current and Previous, one row each. */
.occ-cc-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

.occ-cc-asg-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-cc-asg-row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
	align-items: center;
	gap: 8px 14px;
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid #ecedf2;
	font-size: 14px;
	color: #4a4a4a;
}

.occ-cc-asg-who {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.occ-cc-asg-who .occ-staff-face {
	width: 34px;
	height: 34px;
	font-size: 12px;
}

.occ-cc-asg-who .occ-staff-quiet {
	font-size: 13px;
}

.occ-access a.occ-cc-asg-open {
	font-size: 14px;
	font-weight: 600;
}

.occ-cc-card-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

/* The edit and add forms inside the panel. */
.occ-cc-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.occ-cc-detail .occ-staff-card > p,
.occ-cc-detail .occ-cc-pair > p {
	margin: 0;
}

.occ-cc-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
}

.occ-cc-detail .occ-client-companies-readonly {
	margin: 0;
}

.occ-cc-detail .occ-client-companies-person:last-child {
	border-bottom: 0;
}

.occ-access a.occ-cc-cancel {
	font-size: 14px;
	font-weight: 600;
}

@media ( max-width: 900px ) {
	.occ-cc-asg-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.occ-cc-asg-site,
	.occ-cc-asg-dates {
		grid-column: 1 / 2;
	}
}

@media ( max-width: 600px ) {
	.occ-cc-facts,
	.occ-cc-pair {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* D-362, b10.515: a client's contacts and worksites, each in a fold with its form. */
.occ-cc-records {
	gap: 0;
}

.occ-cc-records > .occ-staff-card-title {
	margin-bottom: 6px;
}

.occ-cc-record {
	border-top: 1px solid #ecedf2;
}

.occ-cc-record > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 0;
	cursor: pointer;
	list-style-position: inside;
}

.occ-cc-record.is-inactive > summary {
	color: #696969;
}

.occ-cc-record-add {
	font-size: 14px;
	font-weight: 600;
	color: #a41e32;
}

.occ-cc-record[open] {
	padding-bottom: 14px;
}

.occ-cc-record-form,
.occ-cc-record-off {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.occ-cc-record-off {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed #ecedf2;
}

.occ-cc-record-form > p,
.occ-cc-record-off > p {
	margin: 0;
}

/* =========================================================================
 * D-362, b10.516: Bill the client
 *
 * The button beside Edit opens the panel under the client's name (its own
 * address, occ_cc_bill=1, so nothing needs script); Bills sent lists what
 * went; one bill opens as it was sent.
 * ========================================================================= */

.occ-cc-who-actions {
	display: flex;
	flex-wrap: wrap;
	flex: 0 0 auto;
	align-self: flex-start;
	gap: 10px;
}

/*
 * b10.680: on a phone the company's name and its three buttons (Edit, Send
 * login invite, Request payment) did not fit one line; the buttons ran 177px
 * past the card. Below 600px they take a line of their own and wrap.
 */
@media (max-width: 600px) {
	.occ-cc-detail .occ-staff-who {
		flex-wrap: wrap;
	}

	.occ-cc-detail .occ-cc-who-actions {
		flex: 1 1 100%;
		min-width: 0;
	}
}

.occ-access .occ-cc-bill-toggle.occ-access-button.is-open {
	border: 1px solid var(--occ-ui-blue-line);
	background: var(--occ-ui-blue-soft);
	color: var(--occ-ui-navy);
}

.occ-cc-bill {
	overflow: hidden;
	border: 1px solid #a41e32;
	border-radius: 10px;
	background: #fff;
}

.occ-cc-bill-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	background: rgba(164, 30, 50, .06);
	border-bottom: 1px solid #ecedf2;
}

.occ-cc-bill-head > div {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.occ-cc-bill-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--occ-ui-text);
}

.occ-access a.occ-cc-bill-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	color: #696969;
}

.occ-cc-bill-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 18px;
}

.occ-cc-bill-body > p,
.occ-cc-bill-money > p {
	margin: 0;
}

.occ-cc-bill-to {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.occ-cc-bill-to legend {
	padding: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: #202124;
}

.occ-cc-bill-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 28px;
	font-size: 14px;
	color: #202124;
}

.occ-cc-bill-indent {
	margin: 0 0 0 28px;
}

.occ-cc-bill-money {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 10px 14px;
}

.occ-cc-bill-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #ecedf2;
	border-radius: 10px;
	background: #fbfcfe;
	color: #202124;
}

.occ-cc-bill-link i {
	color: #696969;
}

.occ-cc-bill-link > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 13px;
}

.occ-cc-bill-url {
	overflow: hidden;
	font-size: 13px;
	color: #696969;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.occ-cc-bill-subject {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	border: 1px solid #ecedf2;
	border-radius: 10px;
	background: #fbfcfe;
	font-size: 14px;
	color: #202124;
}

.occ-cc-bill-nolink {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid #ffb900;
	border-radius: 10px;
	background: rgba(255, 185, 0, .1);
	color: #202124;
}

.occ-cc-bill-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	padding: 12px 18px;
	background: #fbfcfe;
	border-top: 1px solid #ecedf2;
	font-size: 14px;
	font-weight: 600;
}

.occ-access .occ-cc-bill-foot .occ-access-button[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.occ-asg-page .occ-cc-invalid {
	border-color: #d93025;
	background: rgba(217, 48, 37, .08);
}

.occ-cc-field-error {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #d93025;
}

/* Bills sent: one row per email, opening it as it was sent. */
.occ-cc-bill-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-cc-bill-list li {
	margin: 0;
	border-top: 1px solid #ecedf2;
}

.occ-access a.occ-cc-bill-row {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) auto auto;
	align-items: center;
	gap: 8px 14px;
	padding: 10px 0;
	font-size: 14px;
	color: #202124;
	text-decoration: none;
}

.occ-access a.occ-cc-bill-row:hover .occ-cc-bill-amount,
.occ-access a.occ-cc-bill-row:focus .occ-cc-bill-amount {
	color: #a41e32;
}

.occ-cc-bill-when,
.occ-cc-bill-who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.occ-cc-bill-who .occ-staff-quiet {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.occ-cc-bill-amount {
	font-weight: 700;
	text-align: right;
}

.occ-cc-bill-mail {
	padding: 16px 18px;
	border: 1px solid #ecedf2;
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	color: #202124;
}

.occ-cc-bill-mail table {
	width: 100%;
}

@media ( max-width: 600px ) {
	.occ-cc-bill-money {
		grid-template-columns: minmax(0, 1fr);
	}

	.occ-access a.occ-cc-bill-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

/* =========================================================================
 * D-362, b10.518: CSS corrections from the MIRROR check (Philipp, 2026-09-25)
 *
 * Measured on the rendered page in Browser 2, not reasoned from the files:
 * - Bill the client took the base button's 50px height and the theme's link
 *   colour, so it stood twice Edit's height with burgundy on burgundy.
 * - Send the bill and Save the company fell to this page's quiet submit rule
 *   (`.occ-asg-page button[type=submit]`), white instead of the main action.
 * - The phone input is type=tel, which the field rule did not list; it sat as
 *   a bare browser box with the flag over it.
 * - A contact or worksite fold's summary is a flex row, which drops the
 *   browser's marker, so nothing said it opens.
 * - In the bill panel the fields stopped at 32em and the radios were the
 *   browser's blue.
 * ========================================================================= */

/*
 * b10.533 (D-365): Edit is the secondary button. The page's link colour
 * (`.occ-asg-page a:not(.button)`) outranked the quiet button's own grey and
 * painted it burgundy.
 */
.occ-access .occ-cc-who-actions a.occ-access-button.occ-access-button--quiet {
	color: var(--occ-ui-text-2);
}

.occ-access .occ-cc-who-actions a.occ-access-button.occ-access-button--quiet:is(:hover, :focus) {
	color: var(--occ-ui-text);
	text-decoration: none;
}

/* Bill the client: Edit's size, solid blue while closed (D-365 build 3: billing is the blue action). */
.occ-access .occ-cc-who-actions a.occ-access-button {
	display: inline-flex;
	align-items: center;
	height: auto;
	padding: .45em 1em;
	font-size: 13px;
	line-height: 1.2;
}

.occ-access .occ-cc-who-actions a.occ-access-button.occ-cc-bill-toggle {
	border: 1px solid var(--occ-ui-blue);
	background: var(--occ-ui-blue);
	color: #fff;
	font-weight: 600;
}

.occ-access .occ-cc-who-actions a.occ-access-button.occ-cc-bill-toggle:hover,
.occ-access .occ-cc-who-actions a.occ-access-button.occ-cc-bill-toggle:focus {
	border-color: var(--occ-ui-blue-hover);
	background: var(--occ-ui-blue-hover);
	color: #fff;
}

.occ-access .occ-cc-who-actions a.occ-access-button.occ-cc-bill-toggle.is-open,
.occ-access .occ-cc-who-actions a.occ-access-button.occ-cc-bill-toggle.is-open:hover,
.occ-access .occ-cc-who-actions a.occ-access-button.occ-cc-bill-toggle.is-open:focus {
	border-color: var(--occ-ui-blue-line);
	background: var(--occ-ui-blue-soft);
	color: var(--occ-ui-navy);
}

/* The main action at the foot of the edit and bill panels. */
.occ-access .occ-staff-foot button.occ-access-button.occ-cc-save,
.occ-access .occ-cc-bill-foot button.occ-access-button {
	height: 42px;
	padding: 0 22px;
	border: 1px solid var(--occ-ui-brand);
	border-radius: 8px;
	background: var(--occ-ui-brand);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 40px;
}

.occ-access .occ-staff-foot button.occ-access-button.occ-cc-save:hover,
.occ-access .occ-staff-foot button.occ-access-button.occ-cc-save:focus {
	border-color: var(--occ-ui-brand-hover);
	background: var(--occ-ui-brand-hover);
	color: #fff;
}

/* D-365 build 3: sending the bill is the solid blue action. */
.occ-access .occ-cc-bill-foot button.occ-access-button {
	border-color: var(--occ-ui-blue);
	background: var(--occ-ui-blue);
}

.occ-access .occ-cc-bill-foot button.occ-access-button:hover,
.occ-access .occ-cc-bill-foot button.occ-access-button:focus {
	border-color: var(--occ-ui-blue-hover);
	background: var(--occ-ui-blue-hover);
	color: #fff;
}

.occ-access .occ-cc-bill-foot button.occ-access-button[disabled],
.occ-access .occ-cc-bill-foot button.occ-access-button[disabled]:hover {
	border-color: var(--occ-ui-blue);
	background: var(--occ-ui-blue);
	opacity: .5;
	cursor: not-allowed;
}

/*
 * D-365 build 3: Deactivate, Stop this person signing in and Remove from this
 * company are the soft red action (the template marks them occ-cc-stop).
 */
:is(.occ-asg-page, .occ-access) button.occ-cc-stop[type="submit"] {
	display: inline-flex;
	align-items: center;
	border-color: var(--occ-ui-red-line);
	background: var(--occ-ui-red-soft);
	color: var(--occ-ui-red-text);
}

:is(.occ-asg-page, .occ-access) button.occ-cc-stop[type="submit"]:is(:hover, :focus) {
	border-color: var(--occ-ui-red-line);
	background: var(--occ-ui-red-soft-hover);
	color: var(--occ-ui-red-hover);
}

/* The company phone in the edit and add panels: the standard box (D-359). */
.occ-asg-page .occ-rg-phone-wrapper {
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
	max-width: 20em;
	height: var(--occ-ui-field-h);
	overflow: hidden;
	background: #f5f7fc;
	border: 1px solid var(--occ-ui-field-border);
	border-radius: 8px;
}

.occ-asg-page .occ-rg-phone-wrapper:focus-within {
	border-color: #a41e32;
	box-shadow: 0 0 0 3px rgba(164, 30, 50, .1);
}

.occ-asg-page .occ-rg-phone-wrapper .occ-rg-flag-icon {
	position: static;
	order: 0;
	align-self: center;
	width: 20px;
	margin: 0 0 0 12px;
	transform: none;
}

.occ-asg-page .occ-rg-phone-wrapper::after {
	content: "+1";
	order: 1;
	align-self: center;
	padding: 0 10px 0 7px;
	font-size: 14px;
	font-weight: 600;
	color: #202124;
}

.occ-asg-page .occ-rg-phone-wrapper input[type="tel"],
.occ-asg-page .occ-rg-phone-wrapper input[type="text"] {
	order: 2;
	flex: 1 1 auto;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0 12px;
	background: #fff;
	border: 0;
	border-left: 1px solid var(--occ-ui-field-border);
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	font-size: 14px;
	color: var(--occ-ui-field-text);
}

.occ-asg-page .occ-rg-phone-wrapper input:focus {
	outline: none;
	box-shadow: none;
}

/* D-394 (b10.680): the phone box takes the field focus ring as a whole. */
.occ-asg-page .occ-rg-phone-wrapper:focus-within {
	border-color: var(--occ-ui-chosen-line);
	box-shadow: var(--occ-ui-field-focus);
}

/* A contact or worksite fold: a chevron that turns when it is open. */
.occ-cc-record > summary {
	list-style: none;
	gap: 10px;
}

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

.occ-cc-record > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin: -4px 4px 0 auto;
	border-right: 2px solid #696969;
	border-bottom: 2px solid #696969;
	transform: rotate(45deg);
	transition: transform .15s ease;
}

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

.occ-cc-record > summary:hover::after {
	border-color: #a41e32;
}

/* The bill panel: fields across their column, radios and ticks in burgundy. */
.occ-asg-page .occ-cc-bill :is(input[type="text"], input[type="email"], select, textarea) {
	max-width: none;
}

.occ-asg-page .occ-cc-bill-indent select {
	max-width: 40em;
}

.occ-asg-page textarea {
	padding-top: 14px;
	padding-bottom: 14px;
}

.occ-asg-page :is(input[type="radio"], input[type="checkbox"]) {
	accent-color: var(--occ-ui-chosen-line);
}

/* ------------------------------------------------------------ b10.521 D-364
 * The Timesheets page: one toolbar (Find a name and the status chips, then
 * the payroll period and the client), a full-width table, and one timesheet
 * with the person on top, a facts strip, Approval beside History, and the
 * Technical details. The search and chips are AccessManager's pieces.
 */
.occ-asg-page .occ-ct-toolbar-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0 0 14px;
}

.occ-asg-page .occ-ct-toolbar-top form.occ-staff-find {
	flex: 1 1 260px;
	max-width: 420px;
	margin: 0;
}

.occ-asg-page .occ-ct-toolbar-top ul.occ-staff-filters {
	margin: 0;
}

.occ-asg-page form.occ-client-timesheets-filters.occ-ct-period {
	align-items: flex-end;
	margin: 0;
}

.occ-asg-page form.occ-ct-period p[hidden] {
	display: none;
}

.occ-asg-page form.occ-ct-period p.occ-ct-period-go {
	display: flex;
	align-items: center;
	gap: 14px;
}

.occ-asg-page a.occ-ct-clear,
.occ-asg-page .occ-ct-only a,
.occ-asg-page a.occ-ct-back {
	color: #a41e32;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.occ-asg-page .occ-ct-only {
	margin: 12px 0 0;
	font-size: 13px;
	color: #696969;
}

/* The table. Beats the theme's own table borders and stripes by three classes. */
.occ-asg-page .occ-ct-table-wrap {
	overflow-x: auto;
	border: 1px solid #ecedf2;
	border-radius: 8px;
}

.occ-asg-page .occ-ct-table-wrap table.occ-ct-table {
	width: 100%;
	min-width: 860px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: #fff;
}

.occ-asg-page .occ-ct-table-wrap table.occ-ct-table th {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid #ecedf2;
	background: var(--occ-ui-fill-soft);
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	color: var(--occ-ui-text-3);
	white-space: nowrap;
}

.occ-asg-page .occ-ct-table-wrap table.occ-ct-table td {
	padding: 12px;
	border: 0;
	border-bottom: 1px solid #ecedf2;
	background: transparent;
	font-size: 14px;
	color: #202124;
	vertical-align: top;
}

.occ-asg-page .occ-ct-table-wrap table.occ-ct-table tbody tr:last-child td {
	border-bottom: 0;
}

.occ-asg-page .occ-ct-table-wrap table.occ-ct-table tbody tr {
	cursor: pointer;
}

/* D-365: hover is grey, never burgundy. */
.occ-asg-page .occ-ct-table-wrap table.occ-ct-table tbody tr:hover td {
	background: var(--occ-ui-fill-soft);
}

.occ-asg-page a.occ-ct-sort {
	color: inherit;
	text-decoration: none;
}

.occ-asg-page a.occ-ct-sort:hover,
.occ-asg-page a.occ-ct-sort.is-current {
	color: var(--occ-ui-text);
}

.occ-asg-page a.occ-ct-sort.is-current::after {
	content: "";
	display: inline-block;
	margin-left: 6px;
	border: 4px solid transparent;
	border-top-color: var(--occ-ui-text);
	transform: translateY(2px);
}

.occ-asg-page a.occ-ct-sort.is-current.is-asc::after {
	border-top-color: transparent;
	border-bottom-color: var(--occ-ui-text);
	transform: translateY(-2px);
}

.occ-asg-page a.occ-ct-who {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

.occ-asg-page .occ-ct-face {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--occ-ui-line-soft);
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-text-2);
}

.occ-asg-page .occ-ct-who-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.occ-asg-page .occ-ct-name {
	font-weight: 600;
	color: #202124;
}

.occ-asg-page a.occ-ct-who:hover .occ-ct-name {
	color: var(--occ-ui-text);
	text-decoration: none;
}

.occ-asg-page .occ-ct-meta {
	margin: 0;
	font-size: 13px;
	color: #8a8a8a;
}

.occ-asg-page .occ-ct-hours {
	display: block;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.occ-asg-page .occ-ct-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 5px;
}

/* D-365 build 2: drawn as the dot chip by occ-ui.css; only the tone is set here. */
.occ-asg-page .occ-ct-tag {
	--occ-ui-chip-dot: var(--occ-ui-dot-navy);
}

.occ-asg-page .occ-ct-tags .occ-ts-flags {
	display: contents;
}

.occ-asg-page td.occ-ct-last {
	min-width: 170px;
	font-size: 13px;
	color: #696969;
}

.occ-asg-page td.occ-ct-actions {
	text-align: right;
}

/*
 * D-365 build 3: a table's buttons are the small size, 32px, each with its icon.
 * b10.542: they wrap under each other when the row is short of room, so the
 * table fits its card instead of scrolling the last button out of sight.
 */
.occ-asg-page td.occ-ct-actions .button {
	display: inline-flex;
	align-items: center;
	/* b10.754: side by side, the 6px under all but the last button put them 3px apart; top keeps them level. */
	vertical-align: top;
	height: 32px;
	margin: 0 0 6px 6px;
	padding: 0 12px;
	font-size: 13px;
	white-space: nowrap;
}

.occ-asg-page td.occ-ct-actions .button:last-child {
	margin-bottom: 0;
}

.occ-asg-page td.occ-ct-actions .button.occ-ct-yours {
	background: var(--occ-ui-brand);
	border-color: var(--occ-ui-brand);
	color: #fff;
}

.occ-asg-page td.occ-ct-actions .button.occ-ct-yours:is(:hover, :focus) {
	background: var(--occ-ui-brand-hover);
	border-color: var(--occ-ui-brand-hover);
}

.occ-asg-page .occ-ct-table-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	font-size: 13px;
	color: #696969;
}

.occ-asg-page .occ-ct-table-foot .occ-client-timesheets-paging {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.occ-asg-page .occ-ct-table-foot .button {
	padding: 6px 14px;
	font-size: 13px;
}

/* One timesheet: back and step, then the person. */
.occ-asg-page .occ-ct-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 16px;
}

.occ-asg-page a.occ-ct-back::before {
	content: "\2039\00a0";
}

.occ-asg-page .occ-ct-steps {
	display: flex;
	gap: 8px;
}

.occ-asg-page .occ-ct-steps .button {
	padding: 6px 14px;
	font-size: 13px;
}

.occ-asg-page .occ-ct-hero {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
}

.occ-asg-page .occ-ct-face.occ-ct-face--big {
	width: 64px;
	height: 64px;
	font-size: 20px;
}

.occ-asg-page h2.occ-ct-hero-name {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
}

.occ-asg-page .occ-ct-hero-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
}

.occ-asg-page .occ-ct-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center; /* b10.690: not stretched to the taller one, which left its words high */
	justify-content: flex-end;
	gap: 8px;
}

.occ-asg-page .occ-ct-hero-actions .button {
	padding: 11px 18px 9px; /* b10.690: Figtree sits high; the text 1px lower centres its capitals. */
	font-size: 14px;
}

.occ-asg-page dl.occ-ct-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin: 20px 0 0;
	border: 1px solid #ecedf2;
	border-radius: 8px;
	background: #ecedf2;
	overflow: hidden;
}

.occ-asg-page dl.occ-ct-strip > div {
	margin: 0;
	padding: 12px 16px;
	background: #fff;
}

.occ-asg-page .occ-ct-strip dt {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--occ-ui-muted);
}

.occ-asg-page .occ-ct-strip dd {
	margin: 2px 0 0;
	font-weight: 600;
	color: #202124;
	font-variant-numeric: tabular-nums;
}

/* Approval beside History. */
.occ-asg-page .occ-ct-pair {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.occ-asg-page .occ-ct-pair > .occ-asg-section {
	margin: 0;
}

.occ-asg-page .occ-ct-pair + .occ-asg-section,
.occ-asg-page .occ-ct-pair {
	margin-bottom: 24px;
}

.occ-asg-page .occ-ct-decision-line {
	margin: 0 0 6px;
	font-weight: 600;
}

.occ-asg-page .occ-ct-reason {
	margin: 0 0 6px;
	padding: 10px 14px;
	border-radius: 8px;
	background: rgba(217, 48, 37, .08);
	color: #a1261c;
}

/* Technical details: three groups; the whole fingerprint, wrapped. */
.occ-asg-page .occ-ct-record .occ-ct-record-grid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.occ-asg-page code.occ-ct-hash.occ-ct-hash--full {
	display: block;
	padding: 6px 8px;
	overflow-wrap: anywhere;
	cursor: text;
}

.occ-asg-page .occ-ct-agent {
	word-break: break-all;
}

@media (max-width: 782px) {
	.occ-asg-page .occ-ct-hero {
		grid-template-columns: auto 1fr;
	}

	.occ-asg-page .occ-ct-hero-actions {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}

	.occ-asg-page .occ-ct-pair {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------ b10.522 D-364
 * Seen on MIRROR: the toolbar and the person's card have no h3, so the card
 * rule (`:has(> h3)`) passed them by; they get the card here. Columns keep a
 * readable width before the table scrolls.
 */
.occ-asg-page > div.occ-ct-toolbar,
.occ-asg-page > div.occ-ct-one {
	background: #fff;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	padding: 24px;
	margin: 0 0 30px;
}

.occ-asg-page .occ-ct-table-wrap table.occ-ct-table td:first-child {
	min-width: 230px;
}

.occ-asg-page .occ-ct-table-wrap table.occ-ct-table td.occ-ct-client {
	min-width: 140px;
}

.occ-asg-page .occ-ct-table-wrap table.occ-ct-table td.occ-ct-last {
	min-width: 150px;
}

@media (max-width: 600px) {
	.occ-asg-page > div.occ-ct-toolbar,
	.occ-asg-page > div.occ-ct-one {
		padding: 18px 16px;
	}
}

/* ------------------------------------------------------------ b10.523 D-364
 * The toolbar, seen on MIRROR after b10.522: the period form took the tinted
 * strip every filter form inside a card gets, a grey box inside the white
 * one. It is part of the toolbar, so it goes plain, under a rule that
 * separates it from the search and the chips. Every control is the site's
 * 50px field height.
 */
.occ-asg-page .occ-ct-toolbar .occ-ct-toolbar-top {
	padding: 0 0 16px;
	border-bottom: 1px solid #ecedf2;
}

.occ-asg-page .occ-ct-toolbar form.occ-client-timesheets-filters.occ-ct-period {
	padding: 0;
	border: 0;
	background: none;
}

.occ-asg-page .occ-ct-toolbar .occ-ct-find input[type="search"],
.occ-asg-page .occ-ct-toolbar .occ-ct-find .occ-access-button,
/* b10.680: the field height (D-394), the buttons beside it the same. */
.occ-asg-page .occ-ct-toolbar .occ-ct-period-go .button {
	height: var(--occ-ui-field-h);
}

.occ-asg-page .occ-ct-toolbar .occ-ct-find .occ-access-button {
	line-height: var(--occ-ui-field-h);
}

.occ-asg-page .occ-ct-toolbar .occ-ct-period-go .button {
	padding-top: 2px; /* b10.688: Figtree sits high; the text 1px lower centres its capitals. */
	padding-bottom: 0;
}

/* D-373: the billing address field only while "same as the company address" is not ticked. */
.occ-cc-form:has(#occ-cc-billing-same:checked) .occ-cc-billing-address {
	display: none;
}

/* D-375: the billing card. Two choices; the other person's fields and the address parts only when chosen. */
.occ-cc-form:has(#occ-cc-billing-who-principal:checked) .occ-cc-billing-person {
	display: none;
}
.occ-cc-billing-who {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}
.occ-cc-billing-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #d0d5dd;
	border-radius: 10px;
	cursor: pointer;
}
.occ-cc-billing-option input {
	margin-top: 3px;
}
.occ-cc-billing-option > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
/* D-394 (b10.680): a chosen billing option is navy, not burgundy. */
.occ-cc-billing-option:has(input:checked) {
	border-color: var(--occ-ui-chosen-line);
	background: var(--occ-ui-chosen-bg);
}
.occ-cc-billing-person,
.occ-cc-billing-address {
	padding: 4px 14px;
	border: 1px solid #ecedf2;
	border-radius: 10px;
	background: #fbfcfe;
}
.occ-cc-billing-place {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 0 14px;
}
@media (max-width: 640px) {
	.occ-cc-billing-place {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* D-373: a payment request shows the amount field or the advertising price, by the kind chosen. */
.occ-cc-bill-body:has(input[name="occ_cc_bill_kind"][value="advertising"]:checked) .occ-cc-bill-amount-recruitment,
.occ-cc-bill-body:has(input[name="occ_cc_bill_kind"][value="recruitment"]:checked) .occ-cc-bill-amount-advertising {
	display: none;
}
.occ-cc-bill-kind {
	border: 0;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.occ-cc-bill-kind legend {
	font-weight: 600;
	margin-bottom: 6px;
	width: 100%;
}

/* D-373 build 2b: recipients To / CC, typed addresses. */
.occ-cc-bill-rcpt {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
.occ-cc-bill-rcpt li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
}
.occ-cc-bill-rcpt select,
.occ-cc-bill-other select {
	width: auto;
	min-width: 7em;
	flex: 0 0 auto;
}
.occ-cc-bill-other {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0;
}
.occ-cc-bill-other input {
	flex: 1 1 12em;
	min-width: 0;
}

/* D-373: a day many close that is not a B.C. stat holiday (Easter Monday, Boxing Day). */
.occ-asg-page .occ-ts-observed-day {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #6b7280;
	font-style: italic;
}

/* ------------------------------------------------------------------
 * D-375: the Request payment panel, as in OCC-Payment-Request-Mockups.
 * The kind is two tabs; To and CC are rows of names with an Add menu
 * (drawn by payment-request.js over the plain list, which stays the
 * form without it); the amount, fee and total sit in a box beside the
 * amount; files are listed by name.
 * ------------------------------------------------------------------ */
.occ-cc-bill-kind {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	align-self: flex-start;
	margin: 0;
	padding: 4px;
	border: 0;
	border-radius: 12px;
	background: var(--occ-ui-fill);
}
.occ-cc-bill-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
	color: var(--occ-ui-text-3);
	cursor: pointer;
}
.occ-cc-bill-tab input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}
.occ-cc-bill-tab i {
	color: var(--occ-ui-muted);
}
.occ-cc-bill-tab:has(input:checked) {
	background: var(--occ-ui-white);
	box-shadow: var(--occ-ui-tile-shadow);
	font-weight: 600;
	color: var(--occ-ui-text);
}
.occ-cc-bill-tab:has(input:checked) i {
	color: var(--occ-ui-brand);
}
.occ-cc-bill-tab:has(input:focus-visible) {
	box-shadow: 0 0 0 3px var(--occ-ui-focus);
}

/* Recipients. */
.occ-cc-bill-to.occ-js .occ-cc-bill-plain {
	display: none;
}
.occ-cc-bill-to:not(.occ-js) .occ-cc-bill-js-hint {
	display: none;
}
.occ-cc-bill-plain {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.occ-cc-bill-rows {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--occ-ui-border);
	border-radius: 10px;
	background: var(--occ-ui-white);
}
.occ-cc-bill-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
}
.occ-cc-bill-row + .occ-cc-bill-row,
.occ-cc-bill-menu + .occ-cc-bill-row {
	border-top: 1px solid var(--occ-ui-line);
}
.occ-cc-bill-row-label {
	flex: 0 0 34px;
	line-height: 34px;
	font-size: 13px;
	font-weight: 700;
	color: var(--occ-ui-muted);
}
.occ-cc-bill-chips {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}
.occ-cc-bill-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-height: 34px;
	box-sizing: border-box;
	padding: 0 4px 0 12px;
	border: 1px solid var(--occ-ui-border);
	border-radius: 17px;
	background: var(--occ-ui-fill-soft);
	font-size: 14px;
	color: var(--occ-ui-text);
}
.occ-cc-bill-chip > .fas {
	color: var(--occ-ui-muted);
}
.occ-cc-bill-chip-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.occ-cc-bill-chip-text strong {
	font-weight: 600;
}
.occ-cc-bill-chip-tag {
	font-weight: 400;
	color: var(--occ-ui-muted);
}
.occ-access .occ-cc-bill-chip-x {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--occ-ui-muted);
	cursor: pointer;
}
.occ-access .occ-cc-bill-chip-x:hover,
.occ-access .occ-cc-bill-chip-x:focus-visible {
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text);
}
.occ-access .occ-cc-bill-add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	box-sizing: border-box;
	padding: 0 12px;
	border: 1px dashed var(--occ-ui-faint);
	border-radius: 17px;
	background: var(--occ-ui-white);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--occ-ui-brand);
	cursor: pointer;
}
.occ-access .occ-cc-bill-add:hover,
.occ-access .occ-cc-bill-add[aria-expanded="true"] {
	border-style: solid;
	border-color: var(--occ-ui-brand);
}
.occ-cc-bill-menu {
	margin: 0 12px 12px 58px;
	padding: 6px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 10px;
	background: var(--occ-ui-white);
	box-shadow: 0 8px 20px rgba(16, 24, 40, .08);
}
.occ-access .occ-cc-bill-pick {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	text-align: left;
	color: var(--occ-ui-text);
	cursor: pointer;
}
.occ-access .occ-cc-bill-pick:hover,
.occ-access .occ-cc-bill-pick:focus-visible {
	background: var(--occ-ui-fill-soft);
}
.occ-cc-bill-pick-face {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	font-size: 12px;
}
.occ-cc-bill-pick-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 14px;
}
.occ-cc-bill-pick-name {
	font-weight: 600;
}
.occ-cc-bill-menu-typed {
	display: flex;
	gap: 8px;
	margin-top: 4px;
	padding: 8px 4px 4px;
	border-top: 1px solid var(--occ-ui-line);
}
.occ-cc-bill-menu > .occ-cc-bill-menu-typed:first-child {
	margin-top: 0;
	border-top: 0;
}
.occ-cc-bill-menu-typed input {
	flex: 1 1 auto;
	min-width: 0;
}
.occ-access .occ-cc-bill-menu-add {
	padding: 0 16px;
	border: 1px solid var(--occ-ui-border);
	border-radius: 8px;
	background: var(--occ-ui-white);
	font-weight: 600;
	color: var(--occ-ui-text);
	cursor: pointer;
}
.occ-cc-bill-menu > .occ-cc-field-error:empty {
	display: none;
}

/* Amount, fee and total. */
.occ-cc-bill-body .occ-cc-bill-money {
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	gap: 20px;
	align-items: start;
}
.occ-cc-bill-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.occ-cc-bill-fields > p {
	margin: 0;
}
.occ-cc-bill-fields > div.occ-cc-bill-amount-advertising {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.occ-cc-bill-fields #occ-cc-bill-amount {
	max-width: 220px;
}
.occ-cc-bill-price {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 220px;
	max-width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0 12px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 8px;
	background: var(--occ-ui-fill-soft);
	font-size: 16px;
	font-weight: 700;
}
.occ-cc-bill-price i {
	font-size: 12px;
	color: var(--occ-ui-muted);
}
.occ-cc-bill-sum {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 10px;
	background: var(--occ-ui-fill-soft);
}
.occ-cc-bill-sum-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}
.occ-cc-bill-sum-total {
	padding-top: 10px;
	border-top: 1px solid var(--occ-ui-line);
	font-size: 16px;
	font-weight: 700;
}
@media (max-width: 720px) {
	.occ-cc-bill-body .occ-cc-bill-money {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Files. */
.occ-cc-bill-files {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.occ-cc-bill-filelist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.occ-cc-bill-files.occ-js input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}
.occ-access .occ-cc-bill-files .occ-cc-bill-addfiles {
	align-self: flex-start;
}
.occ-cc-bill-files:has(input[type="file"]:focus-visible) .occ-cc-bill-addfiles {
	box-shadow: 0 0 0 3px var(--occ-ui-focus);
}

/* The email: subject from the template, and where Pay now goes. */
.occ-cc-bill-email {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 10px;
	font-size: 13px;
}
.occ-cc-bill-email > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.occ-cc-bill-subject-line {
	font-size: 14px;
	color: var(--occ-ui-text);
}
.occ-cc-bill-paylink {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	color: var(--occ-ui-muted);
}
.occ-cc-bill-paylink > span {
	min-width: 0;
}
.occ-cc-bill-paylink .occ-cc-bill-url {
	display: block;
}

/* The line beside Send. */
.occ-cc-bill-foot .occ-cc-bill-status {
	margin-right: auto;
}

/* ------------------------------------------------ D-381: Stat holidays tab */

.occ-asg-page.occ-sh .occ-sh-grid {
	display: grid;
	grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
/* The two cards. Sections, so the page's div-with-a-heading card rule leaves them alone. */
.occ-asg-page.occ-sh .occ-sh-card {
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	background: var(--occ-ui-white);
}
.occ-asg-page.occ-sh .occ-sh-list {
	padding: 16px 12px;
}
.occ-asg-page.occ-sh .occ-sh-list .occ-sh-list-head {
	padding: 0 6px;
}
.occ-asg-page.occ-sh .occ-sh-list-head,
.occ-asg-page.occ-sh .occ-sh-detail-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0 0 10px;
}
.occ-asg-page.occ-sh .occ-sh-list-head h3,
.occ-asg-page.occ-sh .occ-sh-detail-head h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--occ-ui-text);
}
.occ-asg-page.occ-sh .occ-sh-detail-head h3 {
	font-size: 20px;
}
.occ-asg-page.occ-sh .occ-sh-when {
	font-size: 13px;
	color: var(--occ-ui-text-3);
}

/* The year switch: the same segmented look as the tabs, smaller. */
.occ-asg-page.occ-sh .occ-sh-years {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 8px;
	background: var(--occ-ui-fill);
}
.occ-asg-page.occ-sh a.occ-sh-year {
	padding: 4px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--occ-ui-text-3);
	text-decoration: none;
}
.occ-asg-page.occ-sh a.occ-sh-year.is-current {
	background: var(--occ-ui-white);
	box-shadow: var(--occ-ui-tile-shadow);
	color: var(--occ-ui-text);
	font-weight: 600;
}

/* The holidays, one row each, the open one tinted. */
.occ-asg-page.occ-sh ul.occ-sh-days {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.occ-asg-page.occ-sh a.occ-sh-day {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--occ-ui-text);
	text-decoration: none;
}
.occ-asg-page.occ-sh a.occ-sh-day:is(:hover, :focus-visible) {
	background: var(--occ-ui-fill-soft);
	text-decoration: none;
}
.occ-asg-page.occ-sh a.occ-sh-day.is-current {
	background: var(--occ-ui-selected);
}
.occ-asg-page.occ-sh a.occ-sh-day:focus-visible {
	outline: 2px solid var(--occ-ui-focus-ring);
	outline-offset: -2px;
}
.occ-asg-page.occ-sh .occ-sh-date {
	display: flex;
	flex: 0 0 44px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: 8px;
	background: var(--occ-ui-fill);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--occ-ui-text-3);
}
.occ-asg-page.occ-sh .occ-sh-num {
	font-size: 16px;
	color: var(--occ-ui-text);
}
.occ-asg-page.occ-sh .occ-sh-what {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.occ-asg-page.occ-sh .occ-sh-name {
	font-size: 14px;
	font-weight: 600;
}
.occ-asg-page.occ-sh .is-observed .occ-sh-name {
	font-weight: 500;
	color: var(--occ-ui-muted);
}
.occ-asg-page.occ-sh .occ-sh-sub,
.occ-asg-page.occ-sh .occ-sh-job,
.occ-asg-page.occ-sh .occ-sh-why,
.occ-asg-page.occ-sh .occ-sh-fine {
	font-size: 13px;
	line-height: 18px;
	color: var(--occ-ui-text-3);
}

/* Chips and their dots: applies green, not confirmed amber, does not apply grey. */
.occ-asg-page.occ-sh .occ-sh-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	box-sizing: border-box;
	padding: 0 10px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 999px;
	background: var(--occ-ui-white);
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-text-2);
	white-space: nowrap;
}
.occ-asg-page.occ-sh .occ-sh-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--occ-ui-dot-grey);
}
.occ-asg-page.occ-sh .occ-sh-dot--applies {
	background: var(--occ-ui-dot-green);
}
.occ-asg-page.occ-sh .occ-sh-dot--unconfirmed {
	background: var(--occ-ui-dot-amber);
}
.occ-asg-page.occ-sh ul.occ-sh-counts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}
.occ-asg-page.occ-sh .occ-sh-note,
.occ-asg-page.occ-sh .occ-sh-ahead {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--occ-ui-fill-soft);
	font-size: 14px;
	color: var(--occ-ui-text-2);
}
.occ-asg-page.occ-sh .occ-sh-ahead {
	background: var(--occ-ui-blue-soft);
	color: var(--occ-ui-navy);
}

/* Who qualifies. */
.occ-asg-page.occ-sh .occ-sh-table-wrap {
	overflow-x: auto;
	margin: 0 0 12px;
}
.occ-asg-page.occ-sh table.occ-sh-table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--occ-ui-line-soft);
	border-collapse: collapse;
}
.occ-asg-page.occ-sh table.occ-sh-table th {
	padding: 10px 14px;
	border-radius: 0;
	background: var(--occ-ui-fill-soft);
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-text-3);
	text-align: left;
}
.occ-asg-page.occ-sh table.occ-sh-table td {
	padding: 11px 14px;
	border: 0;
	border-top: 1px solid var(--occ-ui-line-soft);
	border-radius: 0;
	text-align: left;
	background: var(--occ-ui-white);
	font-size: 14px;
	color: var(--occ-ui-text-2);
	vertical-align: top;
}
.occ-asg-page.occ-sh .occ-sh-person {
	display: block;
	font-weight: 600;
	color: var(--occ-ui-navy);
	text-decoration: none;
}
.occ-asg-page.occ-sh span.occ-sh-person {
	color: var(--occ-ui-text);
}
.occ-asg-page.occ-sh a.occ-sh-person:is(:hover, :focus-visible) {
	color: var(--occ-ui-text);
	text-decoration: underline;
}
.occ-asg-page.occ-sh .occ-sh-job,
.occ-asg-page.occ-sh .occ-sh-why {
	display: block;
	margin-top: 4px;
}
.occ-asg-page.occ-sh p.occ-sh-fine {
	margin: 0 0 12px;
}
.occ-asg-page.occ-sh > p.occ-sh-fine {
	margin-top: 16px;
}

/*
 * D-403 (mockup 1A): what each holiday is, said plainly. A burgundy
 * "B.C. stat" tag, or a dashed "Not a stat" one; past days go grey.
 */
.occ-asg-page.occ-sh .occ-sh-tag {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 20px;
	padding: 0 8px;
	border: 1px solid transparent;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.occ-asg-page.occ-sh .occ-sh-tag--stat {
	background: #fbeaec;
	color: #8a1c2b;
}
.occ-asg-page.occ-sh .occ-sh-tag--not {
	border: 1px dashed #b7bdc8;
	background: var(--occ-ui-white);
	color: var(--occ-ui-muted);
}
.occ-asg-page.occ-sh .occ-sh-legend {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 6px 8px;
	padding: 10px;
	border-radius: 8px;
	background: var(--occ-ui-fill-soft);
	font-size: 13px;
	color: var(--occ-ui-text-2);
}
.occ-asg-page.occ-sh .occ-sh-legend > span {
	display: flex;
	align-items: center;
	gap: 8px;
}
.occ-asg-page.occ-sh .occ-sh-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
}
.occ-asg-page.occ-sh .occ-sh-line .occ-sh-sub {
	font-size: 13px;
}
.occ-asg-page.occ-sh .occ-sh-next {
	font-size: 13px;
	font-weight: 600;
	color: var(--occ-ui-navy);
}
.occ-asg-page.occ-sh .occ-sh-next::before {
	content: "\00B7";
	margin-right: 6px;
	font-weight: 400;
	color: var(--occ-ui-text-3);
}
/* The date tile: burgundy for a stat still ahead, grey once passed, dashed when not a stat. */
.occ-asg-page.occ-sh a.occ-sh-day .occ-sh-date {
	background: #fbeaec;
	color: #8a1c2b;
}
.occ-asg-page.occ-sh a.occ-sh-day .occ-sh-date .occ-sh-num {
	color: inherit;
}
.occ-asg-page.occ-sh a.occ-sh-day.is-past .occ-sh-date {
	background: var(--occ-ui-fill);
	color: var(--occ-ui-muted);
}
.occ-asg-page.occ-sh a.occ-sh-day.is-observed .occ-sh-date {
	box-sizing: border-box;
	border: 1px dashed #b7bdc8;
	background: var(--occ-ui-white);
	color: var(--occ-ui-faint);
}
.occ-asg-page.occ-sh a.occ-sh-day.is-past .occ-sh-name {
	color: var(--occ-ui-muted);
}
.occ-asg-page.occ-sh a.occ-sh-day.is-current {
	box-shadow: inset 0 0 0 1px var(--occ-ui-blue-line);
}

/* The heading's line: tag, the date, then Passed, Today or In N days. */
.occ-asg-page.occ-sh .occ-sh-detail-head {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.occ-asg-page.occ-sh .occ-sh-detail-head .occ-sh-when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: 14px;
	color: var(--occ-ui-text-2);
}
.occ-asg-page.occ-sh .occ-sh-sep::before {
	content: "\00B7";
	margin-right: 8px;
	color: var(--occ-ui-text-3);
}

/* The three counts. */
.occ-asg-page.occ-sh ul.occ-sh-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 4px 0 16px;
	padding: 0;
	list-style: none;
}
.occ-asg-page.occ-sh .occ-sh-tile {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 10px;
	background: var(--occ-ui-fill-soft);
}
.occ-asg-page.occ-sh .occ-sh-tile--applies {
	border-color: #cdeedd;
	background: #f1fbf6;
}
.occ-asg-page.occ-sh .occ-sh-tile--unconfirmed {
	border-color: #f8dfb8;
	background: #fffaf2;
}
.occ-asg-page.occ-sh .occ-sh-tile-n {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: #475467;
}
.occ-asg-page.occ-sh .occ-sh-tile--applies .occ-sh-tile-n {
	color: var(--occ-ui-green);
}
.occ-asg-page.occ-sh .occ-sh-tile--unconfirmed .occ-sh-tile-n {
	color: #b54708;
}
.occ-asg-page.occ-sh .occ-sh-tile-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--occ-ui-text);
}
.occ-asg-page.occ-sh .occ-sh-tile-sub {
	font-size: 13px;
	color: var(--occ-ui-text-3);
}

/* Each person's answer: a tinted pill with its dot. */
.occ-asg-page.occ-sh .occ-sh-answer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--occ-ui-fill);
	font-size: 13px;
	font-weight: 600;
	color: #475467;
	white-space: nowrap;
}
.occ-asg-page.occ-sh .occ-sh-answer--applies {
	background: var(--occ-ui-green-soft);
	color: var(--occ-ui-green);
}
.occ-asg-page.occ-sh .occ-sh-answer--unconfirmed {
	background: #fffaeb;
	color: #b54708;
}
.occ-asg-page.occ-sh table.occ-sh-table td {
	vertical-align: middle;
}

/* The days bar, marked where the 15 needed fall. */
.occ-asg-page.occ-sh .occ-sh-bar {
	position: relative;
	display: block;
	min-width: 120px;
	height: 8px;
	margin: 3px 0 7px;
	border-radius: 999px;
	background: var(--occ-ui-line-soft);
}
.occ-asg-page.occ-sh .occ-sh-bar-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	border-radius: 999px;
	background: var(--occ-ui-dot-grey);
}
.occ-asg-page.occ-sh .occ-sh-bar--applies .occ-sh-bar-fill {
	background: var(--occ-ui-dot-green);
}
.occ-asg-page.occ-sh .occ-sh-bar--unconfirmed .occ-sh-bar-fill {
	background: var(--occ-ui-dot-amber);
}
.occ-asg-page.occ-sh .occ-sh-bar-mark {
	position: absolute;
	top: -3px;
	width: 2px;
	height: 14px;
	margin-left: -1px;
	background: var(--occ-ui-text);
	opacity: .35;
}
.occ-asg-page.occ-sh .occ-sh-days-text {
	font-size: 13px;
	color: var(--occ-ui-text-2);
}

/* What each answer means, under the table. */
.occ-asg-page.occ-sh ul.occ-sh-keys {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.45;
	color: var(--occ-ui-text-2);
}
.occ-asg-page.occ-sh ul.occ-sh-keys li {
	margin: 0;
}
.occ-asg-page.occ-sh .occ-sh-key--applies {
	color: var(--occ-ui-green);
}
.occ-asg-page.occ-sh .occ-sh-key--unconfirmed {
	color: #b54708;
}
.occ-asg-page.occ-sh .occ-sh-key--no {
	color: #475467;
}

@media (max-width: 640px) {
	.occ-asg-page.occ-sh ul.occ-sh-tiles,
	.occ-asg-page.occ-sh ul.occ-sh-keys {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.occ-asg-page.occ-sh .occ-sh-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* On a phone each person is a small card; the labels come from data-label. */
@media (max-width: 640px) {
	.occ-asg-page.occ-sh table.occ-sh-table thead {
		display: none;
	}
	.occ-asg-page.occ-sh table.occ-sh-table,
	.occ-asg-page.occ-sh table.occ-sh-table tbody,
	.occ-asg-page.occ-sh table.occ-sh-table tr,
	.occ-asg-page.occ-sh table.occ-sh-table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.occ-asg-page.occ-sh table.occ-sh-table tr + tr {
		border-top: 1px solid var(--occ-ui-line);
	}
	.occ-asg-page.occ-sh table.occ-sh-table td {
		border-top: 0;
		padding: 6px 14px;
	}
	.occ-asg-page.occ-sh table.occ-sh-table td:nth-child(n+3)::before {
		content: attr(data-label) ": ";
		color: var(--occ-ui-text-3);
	}
}

/*
 * b10.642: the invitation on the read panel's "People with a login" card,
 * Philipp: "we should have an invite tool". A label on its own line, then the
 * contact and the button, which wrap under each other in the narrow card.
 */
.occ-asg-page form.occ-cc-invite-now {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 4px 0 0;
}

.occ-asg-page form.occ-cc-invite-now > label {
	flex: 1 0 100%;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--occ-ui-text-3);
}

.occ-asg-page form.occ-cc-invite-now > select {
	flex: 1 1 180px;
	min-width: 0;
	height: 40px;
	margin: 0;
}

.occ-asg-page form.occ-cc-invite-now > .occ-access-button {
	flex: 0 0 auto;
}

/*
 * b10.646, Philipp: the login invitation beside Edit and Request payment, as a
 * button of Edit's kind: Send login invite, then Withdraw login invitation
 * while it stands, Send the login invite again once it expired. A form of its
 * own, so it takes no room of its own.
 */
.occ-access .occ-cc-who-actions form.occ-cc-login-form {
	display: inline-flex;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.occ-access .occ-cc-who-actions button.occ-access-button {
	display: inline-flex;
	align-items: center;
	height: auto;
	margin: 0;
	padding: .45em 1em;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
}

.occ-access .occ-cc-who-actions button.occ-access-button.occ-access-button--quiet {
	color: var(--occ-ui-text-2);
}

.occ-access .occ-cc-who-actions button.occ-access-button.occ-access-button--quiet:is(:hover, :focus) {
	color: var(--occ-ui-text);
}

/*
 * b10.646, Philipp: "it should ask for confirmation to avoid accidental
 * clicks." The box the login invite buttons open: the browser's own popover,
 * centred over a dimmed page, closed by Cancel, Esc or a click outside.
 */
.occ-asg-page .occ-cc-confirm[popover] {
	box-sizing: border-box;
	width: min(440px, calc(100vw - 32px));
	margin: auto;
	padding: 24px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	background: var(--occ-ui-white);
	box-shadow: 0 20px 48px rgba(16, 24, 40, .22);
	color: var(--occ-ui-text-2);
}

.occ-asg-page .occ-cc-confirm[popover]::backdrop {
	background: rgba(16, 24, 40, .45);
}

.occ-asg-page .occ-cc-confirm form.occ-cc-confirm-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.occ-asg-page .occ-cc-confirm form.occ-cc-confirm-form p {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
}

.occ-asg-page .occ-cc-confirm form.occ-cc-confirm-form p.occ-cc-confirm-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	color: var(--occ-ui-text);
}

.occ-asg-page .occ-cc-confirm form.occ-cc-confirm-form p.occ-staff-quiet {
	font-size: 13px;
	line-height: 18px;
	color: var(--occ-ui-muted);
}

.occ-asg-page .occ-cc-confirm form.occ-cc-confirm-form > label {
	margin: 0 0 -6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--occ-ui-text-2);
}

.occ-asg-page .occ-cc-confirm form.occ-cc-confirm-form > select {
	max-width: none;
}

.occ-asg-page .occ-cc-confirm .occ-cc-confirm-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 8px;
}

.occ-asg-page .occ-cc-confirm .occ-cc-confirm-actions button.occ-access-button {
	display: inline-flex;
	align-items: center;
	height: auto;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var(--occ-ui-border);
	border-radius: 8px;
	background: var(--occ-ui-white);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--occ-ui-text-2);
	cursor: pointer;
}

.occ-asg-page .occ-cc-confirm .occ-cc-confirm-actions button.occ-access-button:is(:hover, :focus) {
	background: var(--occ-ui-fill-soft);
	color: var(--occ-ui-text);
}

.occ-asg-page .occ-cc-confirm .occ-cc-confirm-actions button.occ-access-button[type="submit"] {
	border-color: var(--occ-ui-brand);
	background: var(--occ-ui-brand);
	color: #fff;
}

.occ-asg-page .occ-cc-confirm .occ-cc-confirm-actions button.occ-access-button[type="submit"]:is(:hover, :focus) {
	border-color: var(--occ-ui-brand-hover);
	background: var(--occ-ui-brand-hover);
	color: #fff;
}

.occ-asg-page p.occ-cc-invite-now {
	margin: 4px 0 0;
}

.occ-asg-page p.occ-cc-invite-now button.occ-access-button {
	height: 40px;
	padding: 1px 18px 0; /* b10.688: Figtree sits high; the text 1px lower centres its capitals. */
	font-size: 14px;
	line-height: 40px;
	cursor: pointer;
}

/* ----------------------------------------------------- New assignment (D-392) */

/*
 * b10.646: the New assignment flow (canvas "OCC New Assignment Mockup", board
 * 2). The page's own rules style every submit button as a quiet button, so
 * the flow's segmented switch, its "+ Add" links and its hidden Enter catcher
 * are scoped as `.occ-asg-page.occ-na ... button[type="submit"]` to win.
 */
.occ-asg-page.occ-na .occ-na-company {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--occ-ui-muted);
}

.occ-asg-page.occ-na .occ-na-default[type="submit"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.occ-asg-page.occ-na .occ-na-note {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 20px;
}

.occ-na-note--error {
	border: 1px solid #fda29b;
	background: #fef3f2;
	color: #b42318;
}

.occ-na-note--saved {
	border: 1px solid var(--occ-ui-green-line);
	background: var(--occ-ui-green-soft);
	color: var(--occ-ui-green);
}

.occ-na-steps {
	display: flex;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.occ-na-step {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.occ-na-step-bar {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--occ-ui-line);
}

.occ-na-step.is-done .occ-na-step-bar,
.occ-na-step.is-current .occ-na-step-bar {
	background: var(--occ-ui-brand);
}

.occ-na-step-label {
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: var(--occ-ui-faint);
}

.occ-na-step.is-done .occ-na-step-label {
	color: var(--occ-ui-text-2);
}

.occ-na-step.is-current .occ-na-step-label {
	font-weight: 600;
	color: var(--occ-ui-text);
}

.occ-asg-page.occ-na .occ-na-cols {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: 0;
}

.occ-na-card {
	box-sizing: border-box;
	background: var(--occ-ui-white);
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	box-shadow: var(--occ-ui-tile-shadow);
}

.occ-asg-page.occ-na form.occ-na-form {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	margin: 0;
	padding: 24px 28px;
}

.occ-na-side {
	flex: 0 0 280px;
	padding: 20px 22px;
}

.occ-asg-page.occ-na .occ-na-title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: var(--occ-ui-text);
}

.occ-asg-page.occ-na .occ-na-subhead {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--occ-ui-text);
}

.occ-na-seg {
	display: inline-flex;
	align-self: flex-start;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border-radius: 10px;
	background: var(--occ-ui-fill);
}

.occ-asg-page.occ-na .occ-na-seg button[type="submit"] {
	padding: 9px 14px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	color: var(--occ-ui-text-3);
}

.occ-asg-page.occ-na .occ-na-seg button[type="submit"]:is(:hover, :focus) {
	background: rgba(255, 255, 255, .6);
	color: var(--occ-ui-text);
}

.occ-asg-page.occ-na .occ-na-seg button[type="submit"].is-on {
	background: var(--occ-ui-white);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
	font-weight: 600;
	color: var(--occ-ui-text);
}

.occ-asg-page.occ-na fieldset.occ-na-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.occ-na-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	margin: 0;
	padding: 8px 14px;
	box-sizing: border-box;
	border: 1px solid var(--occ-ui-line);
	border-radius: 10px;
	background: var(--occ-ui-white);
	cursor: pointer;
}

.occ-na-row:hover {
	background: var(--occ-ui-fill-soft);
}

.occ-na-row:has(input:checked) {
	border-color: var(--occ-ui-dot-navy);
	background: var(--occ-ui-selected);
	box-shadow: 0 0 0 1px var(--occ-ui-dot-navy);
}

.occ-na-row input[type="radio"] {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--occ-ui-dot-navy);
}

.occ-na-row .occ-ui-avatar {
	width: 36px;
	height: 36px;
	font-size: 13px;
}

.occ-na-row .occ-ui-avatar.occ-na-square {
	border-radius: 8px;
}

.occ-na-row-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--occ-ui-text);
}

.occ-na-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}

.occ-na-span {
	grid-column: 1 / -1;
}

.occ-na-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.occ-asg-page.occ-na .occ-na-field > label {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--occ-ui-text-2);
}

.occ-asg-page.occ-na .occ-na-field > :is(input, select, textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
}

.occ-na-search,
.occ-na-inline {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}

.occ-na-grow {
	flex: 1 1 auto;
	max-width: 520px;
}

.occ-asg-page.occ-na fieldset.occ-na-box {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 16px;
	border: 1px dashed var(--occ-ui-border);
	border-radius: 10px;
	background: var(--occ-ui-fill-soft);
}

.occ-asg-page.occ-na fieldset.occ-na-box > legend {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--occ-ui-text);
}

.occ-asg-page.occ-na .occ-na-add[type="submit"],
.occ-asg-page.occ-na button.occ-na-add {
	align-self: flex-start;
	padding: 8px 4px;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--occ-ui-dot-navy);
}

.occ-asg-page.occ-na .occ-na-add[type="submit"]:is(:hover, :focus) {
	background: none;
	color: var(--occ-ui-navy);
	text-decoration: none;
}

.occ-asg-page.occ-na .occ-na-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--occ-ui-text-2);
	cursor: pointer;
}

.occ-na-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--occ-ui-chosen-line);
}

.occ-na-check--warn {
	padding: 12px 14px;
	border: 1px solid #fedf89;
	border-radius: 10px;
	background: #fffaeb;
}

.occ-asg-page.occ-na .occ-na-help {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	color: var(--occ-ui-muted);
}

.occ-asg-page.occ-na .occ-na-empty {
	margin: 0;
	padding: 18px 20px;
	border: 1px dashed var(--occ-ui-border);
	border-radius: 10px;
	font-size: 14px;
	color: var(--occ-ui-text-3);
}

.occ-na-review {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.occ-na-review-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 10px;
}

.occ-na-review-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.occ-asg-page.occ-na .occ-na-review-head .occ-na-add[type="submit"] {
	padding: 0;
	font-size: 13px;
}

.occ-na-review-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-muted);
}

.occ-na-review-value {
	font-size: 15px;
	font-weight: 600;
	color: var(--occ-ui-text);
}

.occ-asg-page.occ-na .occ-na-lines {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 14px;
	line-height: 20px;
	color: var(--occ-ui-text-2);
}

.occ-na-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--occ-ui-line);
}

.occ-asg-page.occ-na a.occ-na-quiet {
	font-size: 14px;
	font-weight: 600;
	color: var(--occ-ui-text-3);
	text-decoration: none;
}

.occ-asg-page.occ-na a.occ-na-quiet:is(:hover, :focus) {
	color: var(--occ-ui-text);
}

.occ-asg-page.occ-na input[type="tel"] {
	box-sizing: border-box;
	width: 100%;
	height: var(--occ-ui-field-h);
	padding: 0 12px;
	background-color: var(--occ-ui-field-bg);
	border: 1px solid var(--occ-ui-field-border);
	border-radius: var(--occ-ui-field-radius);
	font: inherit;
	font-size: 14px;
	color: var(--occ-ui-field-text);
}

.occ-asg-page.occ-na input[type="tel"]:focus {
	outline: 0;
	border-color: var(--occ-ui-chosen-line);
	box-shadow: var(--occ-ui-field-focus);
}

.occ-na-sum {
	margin: 0;
}

.occ-na-sum dt {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-muted);
}

.occ-na-sum dd {
	margin: 2px 0 12px;
	font-size: 14px;
	color: var(--occ-ui-text);
}

.occ-na-sum dd.is-empty {
	color: var(--occ-ui-faint);
}

.occ-na-done {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 760px;
	padding: 32px 36px;
}

.occ-na-done-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--occ-ui-green-soft);
	color: var(--occ-ui-green);
	font-size: 24px;
	font-weight: 700;
}

.occ-asg-page.occ-na .occ-na-lead {
	margin: 0;
	font-size: 15px;
	color: var(--occ-ui-text-3);
}

.occ-na-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
}

@media (max-width: 991px) {
	.occ-asg-page.occ-na .occ-na-cols {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.occ-na-side {
		flex: 0 0 auto;
	}
}

@media (max-width: 600px) {
	.occ-na-steps {
		gap: 4px;
	}

	.occ-na-step-label {
		display: none;
	}

	.occ-na-step.is-current .occ-na-step-label {
		display: block;
		position: absolute;
		margin-top: 12px;
	}

	.occ-na-steps {
		position: relative;
		margin-bottom: 44px;
	}

	.occ-na-grid,
	.occ-na-review {
		grid-template-columns: minmax(0, 1fr);
	}

	.occ-asg-page.occ-na form.occ-na-form {
		padding: 20px;
	}

	.occ-na-search,
	.occ-na-inline {
		flex-direction: column;
		align-items: stretch;
	}
}

/* --------------------------------------- A waiting assignment (D-392 build 2) */

/*
 * b10.658: an invited person's assignment (canvas board 4). The flow's cards,
 * fields and notes; the four steps as a track with a dot each; Edit the
 * details as a disclosure under the cards. The confirmation box is the
 * Clients panel's (.occ-cc-confirm).
 */
.occ-asg-page.occ-na-hold h2 .occ-ui-chip {
	margin-left: 8px;
}

.occ-asg-page.occ-na-hold .occ-na-hold-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: 24px 28px;
}

.occ-asg-page.occ-na-hold ol.occ-na-track {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-na-track-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 0 18px 30px;
}

.occ-na-track-step::before {
	content: "";
	position: absolute;
	top: 18px;
	bottom: 0;
	left: 8px;
	width: 2px;
	background: var(--occ-ui-line);
}

.occ-na-track-step:last-child::before {
	display: none;
}

.occ-na-track-dot {
	position: absolute;
	top: 2px;
	left: 0;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 2px solid var(--occ-ui-border);
	border-radius: 50%;
	background: var(--occ-ui-white);
}

.occ-na-track-step.is-done .occ-na-track-dot {
	border-color: var(--occ-ui-green);
	background: var(--occ-ui-green);
}

.occ-na-track-step.is-current .occ-na-track-dot {
	border-color: var(--occ-ui-dot-amber);
	background: var(--occ-ui-white);
	box-shadow: inset 0 0 0 3px var(--occ-ui-dot-amber);
}

.occ-na-track-step.is-bad .occ-na-track-dot {
	border-color: var(--occ-ui-dot-red);
	background: var(--occ-ui-dot-red);
}

.occ-na-track-label {
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	color: var(--occ-ui-text);
}

.occ-na-track-step.is-todo .occ-na-track-label {
	color: var(--occ-ui-text-3);
}

.occ-asg-page.occ-na-hold form.occ-na-hold-retry,
.occ-asg-page.occ-na-hold form.occ-na-hold-send {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/*
 * b10.660: the steps card and Edit the details share the left column, so the
 * disclosure follows the steps instead of waiting below the taller panel on
 * the right. The theme hides the browser's disclosure marker, so the summary
 * draws its own chevron (down when closed, up when open).
 */
.occ-asg-page.occ-na-hold .occ-na-hold-left {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.occ-asg-page.occ-na-hold details.occ-na-hold-edit {
	margin: 0;
	padding: 0;
}

.occ-asg-page.occ-na-hold details.occ-na-hold-edit > summary {
	position: relative;
	display: block;
	padding: 18px 56px 18px 28px;
	list-style: none;
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	color: var(--occ-ui-text);
	cursor: pointer;
}

.occ-asg-page.occ-na-hold details.occ-na-hold-edit > summary::-webkit-details-marker {
	display: none;
}

.occ-asg-page.occ-na-hold details.occ-na-hold-edit > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid var(--occ-ui-text-3);
	border-bottom: 2px solid var(--occ-ui-text-3);
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.occ-asg-page.occ-na-hold details.occ-na-hold-edit[open] > summary::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.occ-asg-page.occ-na-hold details.occ-na-hold-edit > summary:is(:hover, :focus-visible) {
	color: var(--occ-ui-brand-hover);
}

.occ-asg-page.occ-na-hold details.occ-na-hold-edit > summary:is(:hover, :focus-visible)::after {
	border-color: var(--occ-ui-brand-hover);
}

.occ-asg-page.occ-na-hold details.occ-na-hold-edit[open] > summary {
	border-bottom: 1px solid var(--occ-ui-line);
}

.occ-asg-page.occ-na-hold form.occ-na-hold-edit-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 20px 28px 24px;
	border: 0;
	background: none;
	box-shadow: none;
}

@media (max-width: 600px) {
	.occ-asg-page.occ-na-hold .occ-na-hold-main,
	.occ-asg-page.occ-na-hold form.occ-na-hold-edit-form {
		padding: 20px;
	}

	.occ-asg-page.occ-na-hold details.occ-na-hold-edit > summary {
		padding: 16px 48px 16px 20px;
	}

	.occ-asg-page.occ-na-hold details.occ-na-hold-edit > summary::after {
		right: 22px;
	}
}

/* ------------------------------------------------------------------------
 * D-404: business inquiries on the Clients page (OCC_Client_Inquiries).
 * The list, the panel, the cards and the Make a client panel are the
 * Clients page's own (occ-staff-*, occ-cc-bill*); only these are new.
 * --------------------------------------------------------------------- */

/* Make a client wears the person-plus icon, not Request payment's receipt. */
.occ-client-inquiries .occ-cc-bill-toggle.occ-inq-make-toggle {
	--occ-ui-icon: var(--occ-ui-icon-user-plus);
}

.occ-client-inquiries .occ-inq-switch {
	margin: 4px 0 8px;
	font-size: 14px;
}

.occ-client-inquiries .occ-inq-match {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid #f5d98f;
	background: #fffaeb;
	color: #7a4c00;
	font-size: 14px;
}

.occ-client-inquiries .occ-inq-match--none {
	border-color: var(--occ-ui-green-line);
	background: var(--occ-ui-green-soft);
	color: var(--occ-ui-green-hover);
}

.occ-client-inquiries .occ-inq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.occ-client-inquiries .occ-inq-grid p {
	margin: 0 0 12px;
}

.occ-client-inquiries .occ-inq-grid .occ-inq-wide {
	grid-column: 1 / -1;
}

.occ-client-inquiries .occ-inq-grid input {
	max-width: none;
}

.occ-client-inquiries .occ-inq-ticks {
	list-style: none;
	margin: 4px 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.occ-client-inquiries .occ-inq-ticks li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 10px;
}

.occ-client-inquiries .occ-inq-ticks li:first-child {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
}

.occ-client-inquiries .occ-inq-ticks label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.occ-client-inquiries .occ-inq-ticks label input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--occ-ui-chosen-line);
}

.occ-client-inquiries .occ-inq-ticks label > span,
.occ-client-inquiries .occ-inq-ticks li:first-child > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.occ-client-inquiries .occ-inq-ticks input[name="occ_inq_site_name"] {
	margin-left: 28px;
	max-width: 24em;
	height: var(--occ-ui-field-h-sm);
}

.occ-client-inquiries .occ-inq-tick-done {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: var(--occ-ui-chosen-line);
	color: #fff;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}

.occ-client-inquiries .occ-inq-note-form {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	margin: 0 0 8px;
}

.occ-client-inquiries .occ-inq-note-form textarea {
	max-width: none;
	height: auto;
	min-height: 72px;
	padding: 10px 12px;
}

.occ-client-inquiries .occ-inq-history {
	list-style: none;
	margin: 0;
	padding: 0;
}

.occ-client-inquiries .occ-inq-history li {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--occ-ui-line-soft);
	font-size: 14px;
}

.occ-client-inquiries .occ-inq-needs .occ-cc-notes {
	white-space: pre-line;
}

@media (max-width: 720px) {
	.occ-client-inquiries .occ-inq-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.occ-client-inquiries .occ-inq-history li {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}

/* =========================================================================
 * D-408: Clients page. Saving a contact, a worksite or the company is the
 * green action, so it stands out from the quiet buttons around it; a busy
 * button (one click sent the form) is dimmed and cannot be pressed again.
 * The line under "What they are" says what the role means.
 * ========================================================================= */
:is(.occ-asg-page, .occ-access) button.occ-cc-go[type="submit"],
.occ-access .occ-staff-foot button.occ-access-button.occ-cc-save.occ-cc-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	min-height: 44px;
	padding: 0 22px;
	border: 1px solid var(--occ-ui-green);
	border-radius: 8px;
	background: var(--occ-ui-green);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}

:is(.occ-asg-page, .occ-access) button.occ-cc-go[type="submit"]:is(:hover, :focus),
.occ-access .occ-staff-foot button.occ-access-button.occ-cc-save.occ-cc-go:is(:hover, :focus) {
	border-color: var(--occ-ui-green-hover);
	background: var(--occ-ui-green-hover);
	color: #fff;
}

:is(.occ-asg-page, .occ-access) button[type="submit"].is-busy,
:is(.occ-asg-page, .occ-access) button[type="submit"].is-busy:is(:hover, :focus) {
	opacity: .65;
	cursor: progress;
}

.occ-cc-role-desc {
	display: block;
	margin-top: 6px;
	color: #5b6273;
	font-size: 13px;
	line-height: 1.45;
}

.occ-cc-role-desc:empty {
	display: none;
}

.occ-cc-kept {
	margin: 10px 0 0;
}

/* =========================================================================
 * D-408 (mockup board 4 B): OCC's calendar for date boxes. occ-datepicker.js
 * puts a box and a calendar button where an <input type="date"> was; the
 * calendar opens under the box with large days. Without the script the
 * browser's own date box stays.
 * ========================================================================= */
.occ-asg-page .occ-dp {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	max-width: 32em;
}

.occ-asg-page .occ-dp input.occ-dp-box[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	height: 48px;
	font-size: 16px;
	cursor: pointer;
}

.occ-asg-page .occ-dp button.occ-dp-toggle[type="button"] {
	flex: 0 0 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--occ-ui-field-border);
	border-radius: var(--occ-ui-field-radius);
	background: #f1f3f8;
	color: var(--occ-ui-blue, #2f5d95);
	cursor: pointer;
}

.occ-asg-page .occ-dp button.occ-dp-toggle[type="button"]:is(:hover, :focus) {
	background: #e6ebf4;
}

.occ-asg-page .occ-dp-pop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 1000;
	box-sizing: border-box;
	width: 340px;
	max-width: calc(100vw - 32px);
	padding: 14px;
	border: 1px solid #e4e6ec;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(29, 36, 51, .16);
}

.occ-asg-page .occ-dp-pop[hidden] {
	display: none;
}

.occ-asg-page .occ-dp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.occ-asg-page .occ-dp-title {
	font-size: 16px;
	font-weight: 600;
	color: #1d2433;
}

.occ-asg-page .occ-dp button.occ-dp-nav[type="button"] {
	width: 40px;
	height: 40px;
	min-width: 0;
	padding: 0;
	border: 1px solid #e4e6ec;
	border-radius: 8px;
	background: #fff;
	color: #1d2433;
	font-size: 22px;
	line-height: 1;
}

.occ-asg-page .occ-dp-names,
.occ-asg-page .occ-dp-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.occ-asg-page .occ-dp-names {
	margin-bottom: 4px;
	color: #5b6273;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.occ-asg-page .occ-dp button.occ-dp-day[type="button"] {
	height: 44px;
	min-width: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #fff;
	color: #1d2433;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.occ-asg-page .occ-dp button.occ-dp-day[type="button"]:is(:hover, :focus) {
	background: #f1f3f8;
	outline: 2px solid transparent;
}

.occ-asg-page .occ-dp button.occ-dp-day[type="button"]:focus-visible {
	box-shadow: 0 0 0 2px var(--occ-ui-blue, #2f5d95);
}

.occ-asg-page .occ-dp button.occ-dp-day.is-today[type="button"] {
	border-color: var(--occ-ui-blue, #2f5d95);
}

.occ-asg-page .occ-dp button.occ-dp-day.is-picked[type="button"] {
	border-color: var(--occ-ui-brand, #a41e32);
	background: var(--occ-ui-brand, #a41e32);
	color: #fff;
	font-weight: 700;
}

.occ-asg-page .occ-dp button.occ-dp-day[type="button"][disabled] {
	color: #b5bac4;
	background: #fff;
	cursor: not-allowed;
}

.occ-asg-page .occ-dp-foot {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
}

.occ-asg-page .occ-dp button.occ-dp-foot-btn[type="button"] {
	height: 38px;
	min-width: 0;
	padding: 0 14px;
	border: 1px solid #e4e6ec;
	border-radius: 8px;
	background: #fff;
	color: #1d2433;
	font-size: 14px;
}

/* D-408: the pay period number beside a period's dates. */
.occ-asg-page .occ-pp-number-chip {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	margin-right: 6px;
	border-radius: 999px;
	background: #eef3fb;
	color: #2f5d95;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.occ-asg-page input.occ-pp-number[type="number"] {
	max-width: 8em;
}

/* =========================================================================
 * D-409: stat holiday not worked, sick days, and days entered ahead.
 *
 * "Sick" and, on a stat holiday, "I did not work this day" are ticks beside
 * the others and open their boxes the same way. A day not worked hides its
 * times and the other ticks. A day still to come, once the rule's submit day
 * has come, is open and marked "Planned" with a dashed chip. Save draft hides
 * while the attestation is ticked, and on the last step once it can be sent.
 * ========================================================================= */

.occ-asg-page .occ-ts-shift:has(.occ-ts-sick-toggle:checked) .occ-ts-sick-fields,
.occ-asg-page .occ-ts-shift:has(.occ-ts-off-toggle:checked) .occ-ts-off-fields {
	display: grid;
	gap: 10px;
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px solid #ecedf2;
	border-radius: 6px;
	background: #fff;
}

.occ-asg-page .occ-ts-period .occ-ts-sick-fields select {
	width: 100%;
	max-width: 160px;
	height: 38px;
	font-size: 13px;
}

.occ-asg-page .occ-ts-fields label.occ-ts-field--check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
}

.occ-asg-page .occ-ts-period .occ-ts-fields label.occ-ts-field--check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
}

/* A stat holiday not worked: no times, no other tick. */
.occ-asg-page .occ-ts-shift:has(.occ-ts-off-toggle:checked) :is(td.occ-ts-time, td.occ-ts-break) input {
	visibility: hidden;
}

.occ-asg-page .occ-ts-shift:has(.occ-ts-off-toggle:checked) label.occ-ts-toggle:has(:is(.occ-ts-int-toggle, .occ-ts-ot-toggle, .occ-ts-hol-toggle, .occ-ts-sick-toggle)) {
	display: none;
}

.occ-asg-page .occ-ts-period .occ-ts-planned-day,
.occ-asg-page .occ-ts-day-tag {
	display: inline-block;
	margin: 3px 4px 0 0;
	padding: 1px 8px;
	border-radius: 999px;
	background: #f2f4f7;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: #4a5263;
	white-space: nowrap;
}

.occ-asg-page .occ-ts-period .occ-ts-planned-day {
	display: table;
}

.occ-asg-page .occ-ts-chip.is-planned {
	border: 2px dashed #9aa3b5;
	background: #fff;
}

.occ-asg-page .occ-ts-chip.is-planned.is-worked {
	border-color: rgba(52, 168, 83, .6);
	background: rgba(52, 168, 83, .06);
}

.occ-asg-page .occ-ts-ahead {
	margin: 0 0 14px;
	padding: 10px 14px;
	border: 1px solid #c9dcf3;
	border-radius: 8px;
	background: #eef3fb;
	font-size: 14px;
	line-height: 1.5;
	color: #1d3f6b;
}

.occ-asg-page .occ-ts-review-planned {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	font-weight: 700;
	color: #4a5263;
}

/* The question asked on a day: worked, or scheduled; a stat holiday's pay without work; sick. */
.occ-asg-page form:not(.is-planned-day) .occ-ts-guide-ask .occ-ts-ask-planned,
.occ-asg-page form.is-planned-day .occ-ts-guide-ask .occ-ts-ask-now,
.occ-asg-page form:not(.is-stat-day) .occ-ts-guide-ask .occ-ts-ask-stat {
	display: none;
}

/* Save draft: not beside a ticked attestation, nor on the last step once it can be submitted. */
.occ-asg-page form.occ-ts-employee-form:has(input[name="occ_ts_attest"]:checked) p.occ-ts-save,
.occ-js .occ-asg-page form.occ-ts-employee-form.is-guided.is-review:not([data-early]) p.occ-ts-save {
	display: none;
}

/* D-409: the stat pay report's buttons on the Stat holidays tab. */
.occ-asg-page.occ-sh .occ-sh-report {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 14px;
}

.occ-asg-page.occ-sh a.occ-sh-report-btn {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--occ-ui-navy, #2f5d95);
	border-radius: 8px;
	background: var(--occ-ui-navy, #2f5d95);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.occ-asg-page.occ-sh a.occ-sh-report-btn.is-secondary {
	background: #fff;
	color: var(--occ-ui-navy, #2f5d95);
}

.occ-asg-page.occ-sh .occ-sh-report-note {
	flex: 1 1 220px;
	font-size: 13px;
	color: var(--occ-ui-muted, #5b6273);
}

/* D-409: the Sick days tab. */
.occ-asg-page.occ-sd .occ-sd-card {
	min-width: 0;
}

.occ-asg-page.occ-sd .occ-sd-marks {
	display: inline-flex;
	gap: 4px;
	vertical-align: middle;
}

.occ-asg-page.occ-sd .occ-sd-mark {
	width: 14px;
	height: 14px;
	border: 1px solid #c9d0dc;
	border-radius: 3px;
	background: #fff;
}

.occ-asg-page.occ-sd .occ-sd-mark.is-used {
	border-color: #2f5d95;
	background: #2f5d95;
}

.occ-asg-page.occ-sd .occ-sd-over {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 600;
	color: #b42318;
}

.occ-asg-page.occ-sd .occ-sd-stand {
	font-weight: 600;
}

.occ-asg-page.occ-sd .occ-sd-stand--has {
	color: #067647;
}

/* b10.806: not 90 days yet is a normal wait, not a warning (Philipp: the yellow "doesn't make sense"). */
.occ-asg-page.occ-sd .occ-sd-stand--waiting {
	color: var(--occ-ui-text-3, #667085);
	font-weight: 500;
}

.occ-asg-page.occ-sd .occ-sd-stand--unknown {
	color: #b54708;
}

.occ-asg-page.occ-sd .occ-sd-stand--used {
	color: #b42318;
}

.occ-asg-page.occ-sd details.occ-sd-days > summary {
	cursor: pointer;
}

.occ-asg-page.occ-sd details.occ-sd-days ul {
	margin: 6px 0 4px;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.5;
}

.occ-asg-page.occ-sd details.occ-sd-days li {
	margin: 0 0 2px;
}

.occ-asg-page.occ-ts-sickpay,
.occ-asg-page .occ-ts-lookbox.occ-ts-sickpay {
	margin-top: 12px;
}

/*
 * D-409: nothing on the client's approval page or the Timesheets pages wider
 * than its container. A long unbroken value (a document hash, a browser
 * line, an email address) wraps instead of pushing its grid track out, and
 * the grids' smallest columns give way on a narrow screen. Tables keep
 * scrolling inside their own box.
 */
.occ-asg-page.occ-client-timesheets,
.occ-asg-page.occ-ts-review {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.occ-asg-page dl.occ-ct-pairs > div {
	grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
}

.occ-asg-page dl.occ-ct-pairs :is(dt, dd),
.occ-asg-page dl.occ-ct-facts :is(dt, dd),
.occ-asg-page :is(.occ-ts-review-summary, .occ-ts-employee-summary, .occ-ts-review-meta) td {
	min-width: 0;
	overflow-wrap: anywhere;
}

.occ-asg-page dl.occ-ct-facts {
	grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
}

.occ-asg-page .occ-ct-record-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.occ-asg-page :is(.occ-ct-entries-wrap, .occ-ct-table-wrap, .occ-ts-table-wrap) {
	max-width: 100%;
}

@media (max-width: 600px) {
	.occ-asg-page dl.occ-ct-pairs > div {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
 * D-409 (board 5): Payroll Periods as the mockup draws it. The rule form with
 * "How the periods will be numbered" beside it; the period switcher as arrow
 * buttons either side of the number chip and the dates.
 * ========================================================================= */

.occ-asg-page .occ-pp-form-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.occ-asg-page .occ-pp-preview {
	padding: 18px 20px;
	border: 1px solid #ecedf2;
	border-radius: 12px;
	background: #fbfcfe;
}

.occ-asg-page .occ-pp-preview h4 {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
}

.occ-asg-page table.occ-pp-preview-table {
	width: 100%;
	margin: 0 0 10px;
	border-collapse: collapse;
	font-size: 14px;
}

.occ-asg-page table.occ-pp-preview-table :is(th, td) {
	padding: 7px 8px;
	border: 0;
	border-bottom: 1px solid #ecedf2;
	background: transparent;
	text-align: left;
}

.occ-asg-page table.occ-pp-preview-table th {
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-text-3, #5b6273);
}

.occ-asg-page table.occ-pp-preview-table tr.is-current td {
	background: #eef3fb;
}

.occ-asg-page .occ-pp-now {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #c9dcf3;
	font-size: 12px;
	font-weight: 600;
	color: #1d3f6b;
}

.occ-asg-page .occ-pay-periods-form label .occ-staff-quiet {
	margin-left: 6px;
	font-weight: 400;
	color: var(--occ-ui-muted, #5b6273);
}

.occ-asg-page .occ-pay-periods-form input.occ-pp-number[type="number"] {
	width: 8em;
	max-width: 8em;
}

.occ-asg-page .occ-pp-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 10px 12px;
	border: 1px solid #ecedf2;
	border-radius: 12px;
	background: #fff;
}

.occ-asg-page .occ-pp-nav .occ-pp-number-chip {
	margin-right: 0;
}

.occ-asg-page .occ-pp-nav-dates {
	font-size: 16px;
}

.occ-asg-page .occ-pp-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid #cfd3dc;
	border-radius: 8px;
	background: #fff;
	color: #1d2433;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}

.occ-asg-page a.occ-pp-nav-btn:hover {
	border-color: #2f5d95;
	color: #2f5d95;
}

.occ-asg-page .occ-pp-nav-btn.is-off {
	opacity: .35;
}

@media (max-width: 900px) {
	.occ-asg-page .occ-pp-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* D-409 (board 1): the client form in two columns, the address parts grouped. */
.occ-asg-page .occ-cc-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 20px;
	align-items: start;
}

.occ-asg-page .occ-cc-col {
	min-width: 0;
}

.occ-asg-page .occ-cc-col input:not([type="checkbox"]):not([type="radio"]):not([type="tel"]),
.occ-asg-page .occ-cc-col select,
.occ-asg-page .occ-cc-col textarea {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.occ-asg-page .occ-cc-address-box {
	margin: 0 0 14px;
	padding: 12px 14px 2px;
	border: 1px solid #e4e6ec;
	border-radius: 10px;
	background: #fbfcfe;
}

@media (max-width: 1280px) {
	.occ-asg-page .occ-cc-cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * D-409 (board 7): a stat holiday's line. In place of the times, a choice:
 * "I worked this day" (the times, as any day) or "I did not work this day"
 * (the claim, ticked, and its note). Board 10: Sick's two boxes side by side.
 */
.occ-asg-page .occ-ts-period td.occ-ts-statcell {
	vertical-align: top;
}

.occ-asg-page .occ-ts-statchoice {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 8px;
	border: 1px solid #cfd3dc;
	border-radius: 8px;
	overflow: hidden;
}

.occ-asg-page label.occ-ts-statchoice-opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 8px 12px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: #3a4152;
	cursor: pointer;
}

.occ-asg-page label.occ-ts-statchoice-opt + label.occ-ts-statchoice-opt {
	border-left: 1px solid #cfd3dc;
}

.occ-asg-page label.occ-ts-statchoice-opt input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.occ-asg-page label.occ-ts-statchoice-opt:has(input:checked) {
	background: var(--occ-ui-chosen-bg, #eaf0f8);
	color: var(--occ-ui-chosen-text, #1d3f6b);
}

.occ-asg-page label.occ-ts-statchoice-opt:has(input:focus-visible) {
	outline: 2px solid var(--occ-ui-focus-ring, #2f5d95);
	outline-offset: -2px;
}

.occ-asg-page .occ-ts-stat-times {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr);
	gap: 10px;
}

.occ-asg-page .occ-ts-stat-times input {
	width: 100%;
	box-sizing: border-box;
}

.occ-asg-page .occ-ts-off-fields {
	display: none;
}

.occ-asg-page .occ-ts-shift:has(.occ-ts-off-toggle:checked) .occ-ts-off-fields {
	display: grid;
	gap: 4px;
	margin-top: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.occ-asg-page .occ-ts-shift:has(.occ-ts-off-toggle:checked) .occ-ts-stat-times {
	display: none;
}

.occ-asg-page label.occ-ts-off-claim {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #1d2433;
}

.occ-asg-page label.occ-ts-off-claim input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
}

.occ-asg-page .occ-ts-shift:has(.occ-ts-sick-toggle:checked) .occ-ts-sick-fields {
	grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
	align-items: start;
}

.occ-asg-page .occ-ts-sick-fields .occ-ts-field-hint {
	grid-column: 1 / -1;
}

.occ-asg-page .occ-ts-period .occ-ts-sick-fields select {
	max-width: none;
}

/* D-409 board 13, moved on b10.806 (Philipp: the bar "feels out of place"): the report's buttons at the page's top right. */
.occ-asg-page.occ-sh .occ-sh-pagehead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 20px;
}

.occ-asg-page.occ-sh .occ-sh-pagehead-text {
	min-width: 0;
}

.occ-asg-page.occ-sh .occ-sh-pagehead .occ-sh-report {
	flex: 0 0 auto;
	margin: 6px 0 0;
}

/* b10.804: the claim wraps inside the three time columns, so ticking "I did not work this day" does not widen them. */
.occ-asg-page .occ-ts-shift:has(.occ-ts-off-toggle:checked) .occ-ts-off-fields {
	max-width: 340px;
}

.occ-asg-page label.occ-ts-off-claim {
	align-items: flex-start;
	white-space: normal;
}

/*
 * b10.804 (Philipp on b10.802): one button on a stat holiday's first line,
 * under Same as the day before. "I did not work this day" ticks the hidden
 * box; the button then reads "I worked this day" to undo it, the times and
 * the other ticks hide, and the claim shows where the ticks were.
 */
.occ-asg-page .occ-ts-period td.occ-ts-actions label.occ-ts-off-btn {
	position: relative;
	cursor: pointer;
}

.occ-asg-page label.occ-ts-off-btn input.occ-ts-off-toggle {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.occ-asg-page label.occ-ts-off-btn .occ-ts-on-say,
.occ-asg-page label.occ-ts-off-btn:has(input:checked) .occ-ts-off-say {
	display: none;
}

.occ-asg-page label.occ-ts-off-btn:has(input:checked) .occ-ts-on-say {
	display: inline;
}

.occ-asg-page label.occ-ts-off-btn:has(input:checked) {
	background: var(--occ-ui-chosen-bg, #eaf0f8);
	color: var(--occ-ui-chosen-text, #1d3f6b);
}

.occ-asg-page label.occ-ts-off-btn:has(input:focus-visible) {
	outline: 2px solid var(--occ-ui-focus-ring, #2f5d95);
	outline-offset: 2px;
}

.occ-asg-page .occ-ts-period .occ-ts-shift:has(.occ-ts-off-toggle:checked) td.occ-ts-actions :is(.occ-ts-add, .occ-ts-copy) {
	display: none;
}

.occ-asg-page .occ-ts-period .occ-ts-shift:has(.occ-ts-off-toggle:checked) td.occ-ts-extras .occ-ts-fields:not(.occ-ts-note-fields) {
	display: none;
}

.occ-asg-page .occ-ts-period .occ-ts-shift:has(.occ-ts-off-toggle:checked) td.occ-ts-extras .occ-ts-off-fields {
	margin-bottom: 8px;
}

/*
 * b10.816 (Philipp: tidy the client form): in the two columns, City has its
 * own row and Province and Postal code share the next, so a long province name
 * is not cut; the billing email has a row of its own; the billing phone is as
 * wide as the fields around it.
 */
.occ-asg-page .occ-cc-col .occ-cc-billing-place {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 0 14px;
}

.occ-asg-page .occ-cc-col .occ-cc-billing-place > p:first-child {
	grid-column: 1 / -1;
}

.occ-asg-page .occ-cc-col .occ-cc-billing-person .occ-cc-pair:has(#occ-cc-billing-email) {
	grid-template-columns: minmax(0, 1fr);
}

.occ-asg-page .occ-cc-col .occ-cc-billing-person input[type="tel"] {
	width: 100%;
	max-width: none;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
	font-size: 14px;
	color: #101828;
}

.occ-asg-page .occ-cc-col .occ-cc-billing-person > p {
	margin-top: 10px;
}

/* b10.820: Open and Closed inquiries as the same filter chips, under the main ones. */
.occ-client-inquiries .occ-staff-filters.occ-inq-states {
	margin: 8px 0 10px;
}

/* D-411 (item 7): a shift overlapping one on the person's other timesheet. */
.occ-asg-page .occ-ts-overlap {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid #fedf89;
	border-radius: 8px;
	background: #fffaeb;
	color: #7a2e0e;
	font-size: 14px;
	line-height: 1.5;
}

.occ-asg-page .occ-ts-overlap p {
	margin: 0;
}

.occ-asg-page .occ-ts-overlap p + p {
	margin-top: 6px;
}

/* D-411 (item 6): Change staff member beside Open in the Assignments list; b10.880: both buttons with icons. */
.occ-asg-page .occ-tst-row-actions a + a {
	margin-left: 8px;
}

.occ-asg-page .occ-tst-many {
	display: flex;
	align-items: center;
	margin: -4px 0 12px;
}

/* D-411 (item 6): the hand-over is a card of its own, like the chooser above it. */
.occ-temporary-staff-handover {
	background: #fff;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	padding: 24px;
	margin: 0 0 30px;
	scroll-margin-top: 100px;
}

.occ-temporary-staff-handover > :last-child {
	margin-bottom: 0;
}

/*
 * D-412 (b10.878, canvas board 11): Change staff member as one card with two
 * choices, Substitute and Hand over. The choice shows its form; a browser
 * without :has() shows both, which still works.
 */
:is(.occ-temporary-staff-change, .occ-temporary-staff-changes) {
	background: #fff;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	padding: 24px;
	margin: 0 0 30px;
	scroll-margin-top: 100px;
}

:is(.occ-temporary-staff-change, .occ-temporary-staff-changes) > :last-child {
	margin-bottom: 0;
}

.occ-asg-page .occ-tst-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	max-width: 760px;
	margin: 0 0 18px;
}

@media (max-width: 720px) {
	.occ-asg-page .occ-tst-choices {
		grid-template-columns: minmax(0, 1fr);
	}
}

.occ-asg-page .occ-tst-choice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 14px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 400;
}

.occ-asg-page .occ-tst-choice input {
	flex: none;
	margin: 3px 0 0;
	accent-color: #a41e32;
}

.occ-asg-page .occ-tst-choice > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.occ-asg-page .occ-tst-choice strong {
	color: #202124;
}

.occ-asg-page .occ-tst-choice:has(input:checked) {
	border-color: #a41e32;
	box-shadow: inset 0 0 0 1px #a41e32;
	background: #fdf6f7;
}

.occ-asg-page .occ-tst-choice:has(input:focus-visible) {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

.occ-asg-page .occ-tst-choice.is-off {
	cursor: default;
	opacity: .75;
}

.occ-asg-page .occ-tst-choice-why {
	color: #b42318;
	font-size: 13px;
}

.occ-temporary-staff-change:has(input[name="occ_tst_change_choice"][value="substitute"]:checked) .occ-tst-ho,
.occ-temporary-staff-change:has(input[name="occ_tst_change_choice"][value="handover"]:checked) .occ-tst-sub {
	display: none;
}

/* The hand-over form inside the card keeps its old class, without a card of its own. */
.occ-temporary-staff-change .occ-temporary-staff-handover {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.occ-asg-page .occ-tst-sub-text {
	display: block;
	width: 100%;
	margin-top: 8px;
}

.occ-asg-page .occ-tst-sub-drafts {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid #fedf89;
	border-radius: 8px;
	background: #fffaeb;
	color: #7a2e0e;
}

.occ-asg-page .occ-tst-sub-drafts > :last-child {
	margin-bottom: 0;
}

.occ-asg-page .occ-tst-told {
	margin-bottom: 4px;
}

.occ-asg-page .occ-tst-told-list {
	margin: 0 0 16px;
	padding-left: 18px;
	font-size: 14px;
}

/* Small read-only tables here are plain lines, not the row cards of the lists. */
.occ-asg-page table.occ-tst-plain {
	border-spacing: 0;
	margin: 6px 0 8px;
}

.occ-asg-page table.occ-tst-plain th,
.occ-asg-page table.occ-tst-plain tbody td {
	padding: 6px 10px;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	background: #fff;
}

.occ-asg-page table.occ-tst-plain tbody td {
	border-top: 0;
}

.occ-asg-page .occ-tst-changes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-asg-page .occ-tst-changes > li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 10px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #f9fafb;
	font-size: 14px;
	line-height: 1.5;
}

.occ-asg-page .occ-tst-changes > li:last-child {
	margin-bottom: 0;
}

.occ-asg-page .occ-tst-setaside summary {
	cursor: pointer;
	color: #0073aa;
	font-size: 13px;
}

/* D-411 (item 8): the team-member invitations on a client's card, the invite form and the how-to. */
.occ-asg-page .occ-cc-invites-title {
	margin-top: 14px;
}

.occ-asg-page .occ-cc-invites li {
	flex-wrap: wrap;
	gap: 6px 10px;
}

.occ-asg-page .occ-cc-invite-actions {
	display: inline-flex;
	gap: 8px;
	margin-left: auto;
}

.occ-asg-page .occ-cc-invite-actions form {
	margin: 0;
}

.occ-asg-page :is(.occ-cc-staff-invite, .occ-cc-how) {
	margin-top: 12px;
	border-top: 1px solid var(--occ-ui-line);
	padding-top: 10px;
}

.occ-asg-page :is(.occ-cc-staff-invite, .occ-cc-how) > summary {
	cursor: pointer;
	font-weight: 600;
	color: #101828;
}

.occ-asg-page .occ-cc-staff-invite form {
	margin-top: 10px;
}

.occ-asg-page .occ-cc-staff-invite label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
}

.occ-asg-page .occ-cc-staff-invite input[type="text"],
.occ-asg-page .occ-cc-staff-invite input[type="email"] {
	width: 100%;
	max-width: 360px;
}

.occ-asg-page .occ-cc-how ol {
	margin: 10px 0 8px 18px;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
}

/*
 * D-429: Invite on each Clients list row (option A), beside the row's link,
 * and the Invite a team member box (the login invite box's look, with fields).
 */
.occ-staff-row.has-invite {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-right: 10px;
}

.occ-staff-row.has-invite > a.occ-staff-item {
	flex: 1 1 auto;
}

.occ-asg-page .occ-staff-row a.occ-cc-row-invite {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--occ-ui-border);
	border-radius: 8px;
	background: var(--occ-ui-white);
	font-size: 13px;
	font-weight: 600;
	color: var(--occ-ui-text-2);
	text-decoration: none;
}

.occ-asg-page .occ-staff-row a.occ-cc-row-invite:is(:hover, :focus) {
	background: var(--occ-ui-fill-soft);
	color: var(--occ-ui-text);
}

.occ-asg-page .occ-cc-team-box form.occ-cc-confirm-form > input[type="text"],
.occ-asg-page .occ-cc-team-box form.occ-cc-confirm-form > input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
}

.occ-asg-page .occ-cc-team-box form.occ-cc-confirm-form p.occ-cc-team-note {
	padding: 10px 12px;
	border: 1px solid #fedf89;
	border-radius: 10px;
	background: #fffaeb;
	font-size: 13px;
	line-height: 19px;
	color: #7a2e0e;
}

.occ-asg-page .occ-cc-who-actions button.occ-cc-team-button {
	cursor: pointer;
}

/* ------------------------------------------------------- payroll calendar
 * D-411 (item 4). The current period's rows tinted blue, today in the brand
 * colour, the deadline Mondays in amber; two-week periods joined by a bar.
 */
.occ-asg-page .occ-pc-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}

.occ-asg-page .occ-pc-month {
	min-width: 170px;
	margin: 0;
	text-align: center;
	font-size: 18px;
}

.occ-asg-page a.occ-pc-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 8px;
	background: #fff;
	color: #344054;
	font-size: 20px;
	text-decoration: none;
}

.occ-asg-page .occ-pc-rule {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	font-size: 13px;
	color: #475467;
}

.occ-asg-page .occ-pc-picker {
	display: inline-flex;
	gap: 6px;
	margin: 0;
}

.occ-asg-page .occ-pc-body {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 24px;
}

@media (max-width: 860px) {
	.occ-asg-page .occ-pc-body {
		grid-template-columns: minmax(0, 1fr);
	}
}

.occ-asg-page table.occ-pc-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 4px 4px;
	table-layout: fixed;
}

.occ-asg-page table.occ-pc-grid th {
	padding: 2px 0;
	background: none;
	border: 0;
	font-size: 12px;
	font-weight: 500;
	color: #667085;
	text-align: center;
}

.occ-asg-page table.occ-pc-grid thead th:first-child,
.occ-asg-page table.occ-pc-grid th.occ-pc-num {
	width: 52px;
}

.occ-asg-page table.occ-pc-grid td {
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #f9fafb;
	color: #202124;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
}

.occ-asg-page table.occ-pc-grid td.is-out {
	background: transparent;
	color: #c0c5cf;
}

.occ-asg-page table.occ-pc-grid tr.is-current td:not(.is-out) {
	background: #eef2f9;
}

.occ-asg-page table.occ-pc-grid td.is-deadline {
	background: #fffaeb;
	box-shadow: inset 0 0 0 1px #f79009;
	color: #7a2e0e;
	font-weight: 600;
}

/*
 * b10.860 (Philipp, 2026-10-03: "the numbers don't line up" in the last column).
 * The page's table rules (padding, borders, the last column set right, the hover
 * fill) outrank the grid's own, so the grid restates them a step stronger.
 */
.occ-asg-page table.occ-pc-grid:has(> thead) tbody td,
.occ-asg-page table.occ-pc-grid:has(> thead) tbody td:first-child,
.occ-asg-page table.occ-pc-grid:has(> thead) tbody td:last-child {
	padding: 0;
	border: 0;
	border-radius: 6px;
	text-align: center;
	color: #202124;
}

.occ-asg-page table.occ-pc-grid:has(> thead) thead th:last-child,
.occ-asg-page table.occ-pc-grid:has(> thead) thead th:first-child {
	border-radius: 0;
	text-align: center;
}

.occ-asg-page table.occ-pc-grid:has(> thead) tbody tr:hover td {
	background: #f9fafb;
}

.occ-asg-page table.occ-pc-grid:has(> thead) tbody tr:hover td.is-out {
	background: transparent;
}

.occ-asg-page table.occ-pc-grid:has(> thead) tbody td.is-out {
	color: #c0c5cf;
}

.occ-asg-page table.occ-pc-grid:has(> thead) tbody tr.is-current td:not(.is-out) {
	background: #eef2f9;
}

.occ-asg-page table.occ-pc-grid:has(> thead) tbody td.is-deadline {
	background: #fffaeb;
	color: #7a2e0e;
}

/* Today wins over the current period's fill, so its number stays readable. */
.occ-asg-page table.occ-pc-grid:has(> thead) tbody tr td.is-today,
.occ-asg-page table.occ-pc-grid:has(> thead) tbody tr.is-current td.is-today {
	background: #a41e32;
	box-shadow: none;
	color: #fff;
	font-weight: 600;
}

/* b10.860: a period chosen in the list, its days on the grid. */
.occ-asg-page table.occ-pc-grid:has(> thead) tbody tr td.is-picked:not(.is-today) {
	background: #d5e3f6;
	box-shadow: inset 0 0 0 2px #2f5d95;
	color: #1d3d66;
	font-weight: 600;
}

.occ-asg-page .occ-pc-list li.is-picked {
	border-color: #2f5d95;
	box-shadow: 0 0 0 2px #d5e3f6;
}

.occ-asg-page .occ-pc-list ul > li {
	padding: 0;
}

.occ-asg-page .occ-pc-list button.occ-pc-item[type="button"] {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.occ-asg-page .occ-pc-list button.occ-pc-item[type="button"]:is(:hover, :focus-visible) {
	background: #f9fafb;
	outline: none;
}

.occ-asg-page .occ-pc-list button.occ-pc-item .occ-asg-sub {
	display: block;
}

.occ-asg-page .occ-pc-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 24px;
	border-radius: 999px;
	background: #f2f4f7;
	color: #344054;
	font-size: 12px;
	font-weight: 600;
}

.occ-asg-page tr.is-current .occ-pc-chip {
	background: #2f5d95;
	color: #fff;
}

.occ-asg-page .occ-pc-bar-line {
	display: block;
	width: 4px;
	height: 44px;
	margin: -12px auto 0;
	border-radius: 2px;
	background: #d0d5dd;
}

.occ-asg-page tr.is-current .occ-pc-bar-line {
	background: #2f5d95;
}

.occ-asg-page table.occ-pc-grid.is-two tr.is-last td {
	border-bottom: 0;
}

.occ-asg-page table.occ-pc-grid.is-two tr.is-last + tr th,
.occ-asg-page table.occ-pc-grid.is-two tr.is-last + tr td {
	padding-top: 0;
}

.occ-asg-page .occ-pc-list-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: #667085;
}

.occ-asg-page .occ-pc-list ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-asg-page .occ-pc-list li {
	padding: 10px 12px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 8px;
	background: #fff;
}

.occ-asg-page .occ-pc-list li.is-current {
	border-color: #2f5d95;
	background: #f5f8fd;
}

.occ-asg-page .occ-pc-p-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.occ-asg-page .occ-pc-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 14px 0 8px;
	font-size: 13px;
	color: #475467;
}

.occ-asg-page .occ-pc-key {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: -8px;
	border-radius: 4px;
	vertical-align: middle;
}

.occ-asg-page .occ-pc-key.is-current { background: #eef2f9; box-shadow: inset 0 0 0 1px #2f5d95; }
.occ-asg-page .occ-pc-key.is-today { background: #a41e32; }
.occ-asg-page .occ-pc-key.is-deadline { background: #fffaeb; box-shadow: inset 0 0 0 1px #f79009; }

.occ-asg-page .occ-pc-months {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 6px;
}

@media (max-width: 640px) {
	.occ-asg-page .occ-pc-months {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.occ-asg-page .occ-pc-months a {
	padding: 6px 0;
	border: 1px solid var(--occ-ui-line);
	border-radius: 8px;
	background: #fff;
	color: #475467;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
}

.occ-asg-page .occ-pc-months a.is-current {
	border-color: #101828;
	background: #101828;
	color: #fff;
}

/* -------------------------------------------------------------------------
 * D-411 (items 1 to 3): the Payroll notifications panel on Payroll Periods,
 * and the Late chip in its table.
 * ---------------------------------------------------------------------- */

.occ-asg-page .occ-pp-late {
	margin-left: 6px;
}

.occ-asg-page .occ-pn-sample {
	margin: 0 0 18px;
	padding: 14px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	background: #f9fafb;
}

.occ-asg-page .occ-pn-sample-title {
	margin: 0 0 10px;
}

/* b10.864 (Philipp, 2026-10-03): the sample is a small calendar; the deadline day is a normal day, its notifications one per line, tinted as on the calendar. */
.occ-asg-page .occ-pn-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.occ-asg-page .occ-pn-head {
	margin: 0 0 2px;
	padding: 0 2px;
	color: #667085;
	font-size: 12px;
	font-weight: 600;
}

.occ-asg-page .occ-pn-tag {
	margin: 8px 0 4px;
	color: #475467;
	font-size: 12px;
	font-weight: 600;
}

@media (max-width: 720px) {
	.occ-asg-page .occ-pn-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.occ-asg-page .occ-pn-head {
		display: none;
	}

	.occ-asg-page .occ-pn-after .occ-pn-deadline {
		grid-column: 1 / -1 !important;
	}
}

.occ-asg-page .occ-pn-day {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 64px;
	padding: 8px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 8px;
	background: #f9fafb;
	font-size: 13px;
}

.occ-asg-page .occ-pn-day.is-today {
	border-color: #0073aa;
}

/* b10.876 (Philipp): every day of the sample period the same height, whatever it holds; the page's script sets the
   variable to the tallest day when a wrapped line makes one taller. */
.occ-asg-page .occ-pn-week .occ-pn-day {
	min-height: var(--occ-pn-day-h, 96px);
}

.occ-asg-page .occ-pn-after .occ-pn-day {
	min-height: 0;
	background: #fff;
}

.occ-asg-page .occ-pn-after .occ-pn-day.occ-pn-deadline {
	border-color: #f79009;
	background: #fffaeb;
	align-items: flex-start;
}

.occ-asg-page .occ-pn-deadline-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.occ-asg-page .occ-pn-deadline .occ-pn-day-label {
	color: #7a2e0e;
}

.occ-asg-page .occ-pn-deadline .occ-pn-day-sub {
	color: #b54708;
}

.occ-asg-page .occ-pn-day-label {
	font-weight: 600;
	color: #101828;
}

.occ-asg-page .occ-pn-day-sub {
	color: #667085;
	font-size: 12px;
}

.occ-asg-page .occ-pn-mark {
	padding: 2px 8px;
	border-radius: 6px;
	background: #eef2f9;
	color: #1d3d66;
	font-size: 12px;
	font-weight: 600;
}

.occ-asg-page .occ-pn-deadline .occ-pn-mark {
	background: #fff;
	box-shadow: inset 0 0 0 1px #c7d7ee;
}

.occ-asg-page .occ-pn-deadline .occ-pn-mark--amber {
	color: #7a2e0e;
	box-shadow: inset 0 0 0 1px #fedf89;
}

.occ-asg-page .occ-pn-deadline .occ-pn-mark--red {
	color: #912018;
	box-shadow: inset 0 0 0 1px #fecdca;
}

.occ-asg-page .occ-pn-deadline .occ-pn-mark--deadline {
	background: #a41e32;
	color: #fff;
	box-shadow: none;
}

.occ-asg-page .occ-pn-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 10px 0 4px;
	color: #475467;
	font-size: 12px;
}

.occ-asg-page .occ-pn-legend > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.occ-asg-page .occ-pn-key {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: #f9fafb;
	box-shadow: inset 0 0 0 1px var(--occ-ui-line);
}

.occ-asg-page .occ-pn-key.is-after { background: #fff; }
.occ-asg-page .occ-pn-key.is-deadline { background: #fffaeb; box-shadow: inset 0 0 0 1px #f79009; }

.occ-asg-page div.occ-pn-deadline-set {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	background: #fff;
}

.occ-asg-page div.occ-pn-deadline-set legend {
	float: left;
	margin: 0 6px 0 0;
	padding: 0;
	font-weight: 600;
	color: #101828;
}

.occ-asg-page .occ-pn-seg {
	display: inline-flex;
	border: 1px solid var(--occ-ui-line);
	border-radius: 8px;
	overflow: hidden;
}

.occ-asg-page .occ-pn-seg label {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.occ-asg-page .occ-pn-seg label + label {
	border-left: 1px solid var(--occ-ui-line);
}

.occ-asg-page .occ-pn-seg input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.occ-asg-page .occ-pn-seg span {
	display: inline-block;
	padding: 8px 12px;
	background: #fff;
	color: #344054;
	font-size: 13px;
	font-weight: 500;
}

.occ-asg-page .occ-pn-seg input:checked + span {
	background: #101828;
	color: #fff;
}

.occ-asg-page .occ-pn-seg input:focus-visible + span {
	outline: 2px solid #2f5d95;
	outline-offset: -2px;
}

.occ-asg-page .occ-pn-deadline-note {
	flex-basis: 100%;
}

.occ-asg-page .occ-pn-next {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

.occ-asg-page .occ-pn-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	margin: 0 0 14px;
}

.occ-asg-page .occ-pn-card {
	padding: 12px 14px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	background: #fff;
}

.occ-asg-page .occ-pn-card.is-off {
	opacity: 0.6;
}

.occ-asg-page .occ-pn-card p {
	margin: 0 0 8px;
}

.occ-asg-page .occ-pn-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.occ-asg-page .occ-pn-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.occ-asg-page .occ-pn-who {
	font-size: 12px;
	color: #667085;
}

.occ-asg-page .occ-pn-fixed {
	font-size: 14px;
	color: #344054;
}

.occ-asg-page .occ-pn-more {
	margin: 0 0 14px;
}

.occ-asg-page .occ-pn-more summary {
	cursor: pointer;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * b10.864 (Philipp, 2026-10-03): icon buttons in tables, the Pay periods
 * calendar's compact list with View timesheets and Edit, who is on
 * assignment under it, and Timesheets, By Pay Period.
 * ---------------------------------------------------------------------- */

.occ-asg-page .button.occ-asg-iconbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.occ-asg-page .button.occ-asg-iconbtn .occ-asg-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.occ-asg-page .occ-ct-actions .occ-asg-iconbtn + .occ-asg-iconbtn,
.occ-asg-page .occ-ct-actions .occ-asg-iconbtn + form,
.occ-asg-page .occ-tp-remind {
	display: inline-block;
	margin: 0 0 0 6px;
}

/* The notifications panel uses the page's width, not the one-column form's. */
.occ-asg-page .occ-pn > form {
	display: block;
	max-width: none;
}

.occ-asg-page tr.occ-pay-periods-rule.is-editing td {
	background: #f5f8fd;
}

/* The list beside the calendar is as tall as the calendar, and scrolls. */
.occ-asg-page .occ-pc-list {
	position: relative;
	min-height: 260px;
}

.occ-asg-page .occ-pc-list > ul {
	position: absolute;
	top: 28px;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
	gap: 6px;
	padding-right: 4px;
}

@media (max-width: 860px) {
	.occ-asg-page .occ-pc-list {
		min-height: 0;
	}

	.occ-asg-page .occ-pc-list > ul {
		position: static;
		overflow: visible;
	}
}

.occ-asg-page .occ-pc-list li {
	padding: 6px 10px;
}

.occ-asg-page .occ-pc-list button.occ-pc-item[type="button"] {
	padding: 4px 2px;
}

.occ-asg-page .occ-pc-list .occ-pc-p-head {
	justify-content: flex-start;
	font-size: 13px;
}

.occ-asg-page .occ-pc-list .occ-pc-p-head .occ-pc-p-range {
	display: inline;
	flex: 1 1 auto;
}

.occ-asg-page .occ-pc-p-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 2px 2px 2px;
}

.occ-asg-page .occ-pc-p-due {
	flex: 1 1 auto;
	font-size: 12px;
}

.occ-asg-page .button.occ-pc-act {
	min-height: 28px;
	padding: 0 8px;
	font-size: 12px;
	line-height: 26px;
}

.occ-asg-page .button.occ-pc-act .occ-asg-icon {
	width: 14px;
	height: 14px;
}

.occ-asg-page .occ-pc-staff {
	margin: 18px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	background: #fff;
}

.occ-asg-page .occ-pc-staff-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}

.occ-asg-page .occ-pc-staff-head h4 {
	margin: 0;
	font-size: 16px;
}

.occ-asg-page .occ-pc-staff-head .occ-asg-iconbtn {
	margin-left: auto;
}

.occ-asg-page .occ-tp-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	background: #fff;
}

.occ-asg-page form.occ-tp-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0;
}

.occ-asg-page .occ-tp-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.occ-asg-page .occ-tp-field label {
	color: #667085;
	font-size: 12px;
}

.occ-asg-page .occ-tp-gap {
	flex: 1 1 auto;
}

.occ-asg-page .occ-tp-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.occ-asg-page .occ-tp-when {
	display: flex;
	flex-direction: column;
	min-width: 230px;
}

.occ-asg-page .occ-pp-number-chip.is-current {
	background: #2f5d95;
	color: #fff;
}

.occ-asg-page .occ-tp-table-wrap {
	overflow-x: auto;
}

.occ-asg-page .occ-tp-actions {
	white-space: nowrap;
	text-align: right;
}

.occ-asg-page .occ-tp-foot {
	margin: 0;
}

@media (max-width: 720px) {
	.occ-asg-page .occ-tp-gap {
		display: none;
	}

	.occ-asg-page .occ-tp-when {
		min-width: 0;
	}
}

.occ-asg-page div.occ-pn-deadline-set select {
	flex: 0 0 auto;
	width: auto;
	min-width: 120px;
}

.occ-asg-page ol.occ-pn-after {
	align-items: start;
}

/* The deadline day starts under its own weekday and is four days wide (to the end of the week from Thursday). */
.occ-asg-page .occ-pn-after .occ-pn-from-1 { grid-column: 1 / 5; }
.occ-asg-page .occ-pn-after .occ-pn-from-2 { grid-column: 2 / 6; }
.occ-asg-page .occ-pn-after .occ-pn-from-3 { grid-column: 3 / 7; }
.occ-asg-page .occ-pn-after .occ-pn-from-4 { grid-column: 4 / 8; }
.occ-asg-page .occ-pn-after .occ-pn-from-5 { grid-column: 5 / 8; }
.occ-asg-page .occ-pn-after .occ-pn-from-6 { grid-column: 6 / 8; }
.occ-asg-page .occ-pn-after .occ-pn-from-7 { grid-column: 7 / 8; }

/* -------------------------------------------------------------------------
 * b10.868 (Philipp, 2026-10-03): the period list as the mockup (board 9).
 * Each period is one box, padded, hovered and picked as a whole; the first
 * line its number, dates and status, the second its deadline and buttons.
 * ---------------------------------------------------------------------- */

.occ-asg-page .occ-pc-list ul > li.occ-pc-pitem {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid #ecedf2;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}

.occ-asg-page .occ-pc-list ul > li.occ-pc-pitem:hover {
	border-color: #d0d5dd;
	background: #f9fafb;
}

.occ-asg-page .occ-pc-list ul > li.occ-pc-pitem.is-current {
	border-color: #2f5d95;
	background: #f5f8fd;
}

.occ-asg-page .occ-pc-list ul > li.occ-pc-pitem.is-picked {
	border-color: #2f5d95;
	background: #f5f8fd;
	box-shadow: 0 0 0 2px #d5e3f6;
}

.occ-asg-page .occ-pc-list li.occ-pc-pitem button.occ-pc-item[type="button"],
.occ-asg-page .occ-pc-list li.occ-pc-pitem button.occ-pc-item[type="button"]:is(:hover, :focus, :focus-visible) {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
}

.occ-asg-page .occ-pc-list li.occ-pc-pitem button.occ-pc-item[type="button"]:focus-visible {
	outline: 2px solid #2f5d95;
	outline-offset: 4px;
}

.occ-asg-page .occ-pc-list .occ-pc-p-num {
	flex: 0 0 auto;
	color: #202124;
	font-weight: 600;
}

.occ-asg-page .occ-pc-list .occ-pc-p-range {
	flex: 1 1 auto;
	min-width: 0;
	color: #667085;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.occ-asg-page .occ-pc-list .occ-pc-item .occ-ui-chip {
	flex: 0 0 auto;
	font-size: 12px;
}

.occ-asg-page .occ-pc-list .occ-pc-p-foot {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0;
}

.occ-asg-page .occ-pc-list .occ-pc-p-due {
	flex: 1 1 auto;
	color: #667085;
	font-size: 12px;
}

.occ-asg-page .occ-pc-key.is-picked { background: #d5e3f6; box-shadow: inset 0 0 0 2px #2f5d95; }

/* On the Pay periods page the calendar has no heading of its own: the tab names it. */
.occ-asg-page .occ-pc.is-bare .occ-pc-bar {
	margin-top: 0;
}

.occ-asg-page .occ-pc-wrap > .occ-pc-staff {
	margin: 18px 0 0;
}

/* -------------------------------------------------------------------------
 * b10.868 (Philipp, 2026-10-03): Configure as the mockup (board 9).
 * ---------------------------------------------------------------------- */

.occ-asg-page .occ-pp-card {
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid #ecedf2;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 15px rgba(64, 79, 104, .05);
}

.occ-asg-page .occ-pp-card-head,
.occ-asg-page .occ-pn-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}

.occ-asg-page .occ-pp-card-head .occ-asg-add {
	margin-left: auto;
}

.occ-asg-page h2.occ-pp-h {
	margin: 0;
	color: #202124;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}

/* The rule form: a tinted box inside the rules card. */
.occ-asg-page .occ-pp-card .occ-pay-periods-form,
.occ-asg-page .occ-pp-card .occ-pay-periods-form:has(> h3) {
	margin: 16px 0 0;
	padding: 16px;
	border: 1px solid #2f5d95;
	border-radius: 8px;
	background: #f5f8fd;
	box-shadow: none;
}

.occ-asg-page .occ-pay-periods-rules tr.occ-pay-periods-rule.is-editing td {
	background: #f5f8fd;
}

/* The sample, the deadline and each notification are cards of their own. */
.occ-asg-page .occ-pn .occ-pn-sample {
	margin: 0 0 18px;
	padding: 20px;
	border: 1px solid #ecedf2;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 15px rgba(64, 79, 104, .05);
}

.occ-asg-page .occ-pn .occ-pn-sample-title {
	margin: 0 0 10px;
	font-size: 16px;
	color: #202124;
}

.occ-asg-page .occ-pn div.occ-pn-deadline-set {
	box-shadow: 0 6px 15px rgba(64, 79, 104, .05);
}

.occ-asg-page .occ-pn .occ-pn-cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 18px;
}

@media (max-width: 760px) {
	.occ-asg-page .occ-pn .occ-pn-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

.occ-asg-page .occ-pn .occ-pn-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 1px solid #ecedf2;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 15px rgba(64, 79, 104, .05);
}

.occ-asg-page .occ-pn .occ-pn-card p {
	margin: 0;
}

.occ-asg-page .occ-pn .occ-pn-card-head {
	flex-wrap: nowrap;
	gap: 12px;
}

.occ-asg-page .occ-pn .occ-pn-switch {
	position: relative;
	gap: 12px;
	margin: 0;
}

.occ-asg-page .occ-pn .occ-pn-switch input[type="checkbox"] {
	position: absolute;
	width: 44px;
	height: 26px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.occ-asg-page .occ-pn .occ-pn-switch-ui {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 26px;
	border-radius: 999px;
	background: #d0d5dd;
	transition: background-color .15s ease;
}

.occ-asg-page .occ-pn .occ-pn-switch-ui::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .15s ease;
}

.occ-asg-page .occ-pn .occ-pn-switch input:checked + .occ-pn-switch-ui {
	background: #2f5d95;
}

.occ-asg-page .occ-pn .occ-pn-switch input:checked + .occ-pn-switch-ui::after {
	transform: translateX(18px);
}

.occ-asg-page .occ-pn .occ-pn-switch input:focus-visible + .occ-pn-switch-ui {
	outline: 2px solid #2f5d95;
	outline-offset: 2px;
}

.occ-asg-page .occ-pn .occ-pn-switch strong {
	color: #202124;
	font-size: 15px;
}

.occ-asg-page .occ-pn .occ-pn-who {
	margin-left: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: #f2f4f7;
	color: #475467;
	font-size: 12px;
	white-space: nowrap;
}

.occ-asg-page .occ-pn .occ-pn-when {
	color: #667085;
	font-size: 14px;
	line-height: 1.5;
}

.occ-asg-page .occ-pn .occ-pn-card.is-off {
	opacity: 1;
}

.occ-asg-page .occ-pn .occ-pn-card.is-off :is(.occ-pn-when, .occ-pn-sels, .occ-pn-next) {
	opacity: .55;
}

.occ-asg-page .occ-pn .occ-pn-sels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.occ-asg-page .occ-pn .occ-pn-sels select {
	width: auto;
	min-width: 0;
	height: 34px;
	margin: 0;
	padding: 0 30px 0 10px;
	font-size: 13px;
}

.occ-asg-page .occ-pn .occ-pn-chip {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #f9fafb;
	color: #101828;
	font-size: 13px;
}

.occ-asg-page .occ-pn .occ-pn-gap {
	flex: 1 1 auto;
}

.occ-asg-page .occ-pn .button.occ-pn-preview {
	min-height: 32px;
	font-size: 12px;
}

.occ-asg-page .occ-pn .occ-pn-next {
	padding: 8px 10px;
	border-radius: 6px;
	background: #f9fafb;
	color: #344054;
	font-size: 13px;
}

.occ-asg-page .occ-pn .occ-pn-cc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
}

.occ-asg-page .occ-pn .occ-pn-more {
	margin: 0;
	gap: 8px;
}

.occ-asg-page .occ-pn .occ-pn-more-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	line-height: 1.6;
}

.occ-asg-page .occ-pn .occ-pn-more-line label {
	margin: 0;
	font-weight: 400;
}

.occ-asg-page .occ-pn .occ-pn-more-line input[type="text"] {
	width: 72px;
	height: 30px;
	margin: 0;
	padding: 0 8px;
}

.occ-asg-page .occ-pn .occ-pn-more-line select {
	width: auto;
	min-width: 190px;
	height: 30px;
	margin: 0;
}

.occ-asg-page .occ-pn .occ-pn-save {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.occ-asg-page div.occ-pn-deadline-set .occ-pn-deadline-title {
	color: #101828;
	font-size: 14px;
	font-weight: 600;
}

/* b10.870: the calendar is a card on Pay periods too, where it has no heading of its own. */
.occ-asg-page .occ-pc.is-bare {
	margin: 0;
	padding: 22px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 15px rgba(64, 79, 104, .05);
}

/* -------------------------------------------------------------------------
 * b10.872 (Philipp, 2026-10-03): Timesheets, By Pay Period as the mockup
 * (board 10): one row of filters, plain arrow buttons around the period,
 * small tiles with the number under its words.
 * ---------------------------------------------------------------------- */

.occ-asg-page form.occ-tp-bar {
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.occ-asg-page form.occ-tp-bar p.occ-tp-field > label {
	display: block;
	margin: 0;
	color: #667085;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
}

.occ-asg-page .occ-tp-field :is(select, input[type="search"]) {
	width: auto;
	height: 36px;
	margin: 0;
	font-size: 14px;
}

.occ-asg-page #occ-tp-find-period {
	width: 260px;
	max-width: 100%;
}

.occ-asg-page #occ-tp-find {
	width: 180px;
}

.occ-asg-page .occ-tp-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
}

.occ-asg-page .occ-tp-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	color: #344054;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

.occ-asg-page a.occ-tp-arrow:hover {
	background: #f9fafb;
	color: #101828;
}

.occ-asg-page .occ-tp-arrow.is-off {
	opacity: .4;
}

.occ-asg-page .occ-tp-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 26px;
	padding: 0 8px;
	border-radius: 999px;
	background: #f2f4f7;
	color: #344054;
	font-size: 12px;
	font-weight: 600;
}

.occ-asg-page .occ-tp-chip.is-current {
	background: #2f5d95;
	color: #fff;
}

.occ-asg-page .occ-tp-when {
	min-width: 250px;
}

.occ-asg-page .occ-tp-when .occ-tp-range {
	color: #202124;
	font-size: 17px;
	font-weight: 500;
}

.occ-asg-page .occ-tp-when .occ-asg-sub {
	font-size: 12px;
}

.occ-asg-page .button.occ-tp-now {
	height: 36px;
	margin: 0;
}

.occ-asg-page ul.occ-tp-tiles {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-asg-page ul.occ-tp-tiles > li.occ-tp-tile {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #ecedf2;
	border-radius: 8px;
	background: #fff;
}

.occ-asg-page .occ-tp-tile-label {
	display: block;
	color: #667085;
	font-size: 12px;
}

.occ-asg-page .occ-tp-tile-n {
	display: block;
	color: #202124;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}

.occ-asg-page .occ-tp-tile--amber .occ-tp-tile-n { color: #b54708; }
.occ-asg-page .occ-tp-tile--red .occ-tp-tile-n { color: #b42318; }
.occ-asg-page .occ-tp-tile--green .occ-tp-tile-n { color: #067647; }

@media (max-width: 720px) {
	.occ-asg-page ul.occ-tp-tiles {
		flex-wrap: wrap;
	}

	.occ-asg-page ul.occ-tp-tiles > li.occ-tp-tile {
		flex: 1 1 40%;
	}

	.occ-asg-page #occ-tp-find-period,
	.occ-asg-page #occ-tp-find {
		width: 100%;
	}
}

.occ-asg-page .occ-tp-nav a.occ-tp-arrow:is(:link, :visited),
.occ-asg-page .occ-tp-nav span.occ-tp-arrow {
	color: #344054;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * b10.874 (Philipp, 2026-10-03): By Pay Period, the rest of board 10. The
 * selects keep room for their arrow; the three filters move as one group;
 * chevron arrows; Current period as a small button; the list is one table
 * in one box, rows split by lines, not the cards of the other lists.
 * ---------------------------------------------------------------------- */

.occ-asg-page .occ-tp-bar select {
	padding-right: 36px;
	text-overflow: ellipsis;
}

.occ-asg-page .occ-tp-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-left: auto;
}

.occ-asg-page #occ-tp-find-period {
	width: 220px;
}

.occ-asg-page #occ-tp-find {
	width: 170px;
}

.occ-asg-page .occ-tp-when {
	min-width: 220px;
}

.occ-asg-page .occ-tp-arrow .occ-asg-icon {
	width: 18px;
	height: 18px;
}

.occ-asg-page .occ-tp-nav .button.occ-tp-now {
	display: inline-flex;
	align-items: center;
	height: 36px;
	min-height: 0;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}

.occ-asg-page .occ-tp-table-wrap {
	border: 1px solid #ecedf2;
	border-radius: 8px;
}

.occ-asg-page table.occ-tp-table {
	margin: 0;
	border-spacing: 0;
}

.occ-asg-page table.occ-tp-table th,
.occ-asg-page table.occ-tp-table th:is(:first-child, :last-child) {
	padding: 10px 14px;
	border-radius: 0;
	font-weight: 500;
}

.occ-asg-page table.occ-tp-table tbody td,
.occ-asg-page table.occ-tp-table tbody td:is(:first-child, :last-child) {
	padding: 10px 14px;
	border: 0;
	border-top: 1px solid #ecedf2;
	border-radius: 0;
}

.occ-asg-page table.occ-tp-table .occ-asg-sub {
	display: block;
	font-size: 12px;
}

.occ-asg-page table.occ-tp-table .occ-pay-periods-sent {
	font-size: 13px;
}

@media (max-width: 720px) {
	.occ-asg-page .occ-tp-filters {
		margin-left: 0;
		width: 100%;
	}
}

/*
 * D-412 (b10.878, canvas board 12): Change the person on a waiting
 * assignment. The choice shows its fields; without :has() both show.
 */
.occ-asg-page.occ-na-hold .occ-na-hold-change .occ-tst-choices {
	margin: 0;
}

.occ-asg-page.occ-na-hold .occ-na-field--wide {
	grid-column: 1 / -1;
}

.occ-na-hold-change:has(input[value="pick"]:checked) .occ-na-change-invite,
.occ-na-hold-change:has(input[value="invite"]:checked) .occ-na-change-pick {
	display: none;
}

.occ-asg-page.occ-na-hold .occ-na-change-note {
	padding: 10px 12px;
	border: 1px solid #fedf89;
	border-radius: 8px;
	background: #fffaeb;
	color: #7a2e0e;
}

/*
 * Board 13 (b10.880): assignment codes filled in for the agency. The line
 * below a suggested code names each part; the letters fields are short.
 */
.occ-code-help {
	display: block;
	margin-top: 6px;
}

.occ-code-parts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0 0 6px;
}

.occ-code-part {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 6px 10px;
	border-radius: 6px;
	background: #f2f4f7;
	color: #475467;
	font-size: 12px;
	line-height: 1.3;
}

.occ-code-part b {
	color: #101828;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 13px;
}

.occ-code-sep {
	align-self: center;
	color: #98a2b3;
	font-weight: 600;
}

.occ-code-note {
	display: block;
}

/* b10.886: short, as board 13 (the forms' own field rules would stretch it). */
html body .occ-asg-page form input[type="text"].occ-cc-code-letters {
	width: 140px;
	max-width: 140px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
}

.occ-temporary-staff-codes {
	margin-top: 30px;
}

.occ-asg-page .occ-na-code-field .occ-na-add {
	align-self: flex-start;
	margin-top: 6px;
}

/*
 * b10.886: the pages as boards 11 to 13 draw them.
 */

/* A question-mark tip stays beside its label. */
.occ-asg-page label:has(+ .occ-tip) {
	display: inline-block;
	margin-right: 6px;
}

/* New assignment: the code field across the form, under the dates. */
.occ-na-grid > .occ-na-field--wide {
	grid-column: 1 / -1;
}

.occ-asg-page .occ-code-next {
	padding: 1px 6px;
	border-radius: 4px;
	background: #f2f4f7;
	color: #101828;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 13px;
}

/* The person on an assignment where Change staff member is offered. */
.occ-asg-page .occ-tst-label {
	font-weight: 600;
	color: var(--occ-ui-text);
}

.occ-asg-page .occ-tst-person {
	display: block;
	margin: 4px 0;
	color: #202124;
	font-size: 16px;
}

/* A waiting assignment: Change the person among the actions, the choices across the card, its changes. */
.occ-asg-page.occ-na-hold .occ-na-foot .occ-na-hold-change-open {
	margin-right: auto;
}

.occ-asg-page.occ-na-hold .occ-na-hold-change .occ-tst-choices {
	max-width: none;
}

.occ-asg-page.occ-na-hold .occ-na-hold-changes {
	padding: 20px 28px 24px;
}

.occ-asg-page.occ-na-hold .occ-na-hold-changes .occ-na-subhead {
	margin-top: 0;
}

/* Change staff member: who is on it now, as board 11. */
.occ-asg-page .occ-tst-change-head {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 760px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #f9fafb;
	font-size: 14px;
}

.occ-asg-page .occ-tst-change-head strong {
	color: #202124;
}

.occ-asg-page .occ-tst-change-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e4e7ec;
	color: #344054;
	font-weight: 600;
}

.occ-asg-page .occ-tst-change-line {
	display: block;
	font-size: 13px;
}

/* Substitute and Hand over: the person and the reason (or the first day) side by side, as boards 3 and 11. */
@media (min-width: 900px) {
	.occ-asg-page :is(.occ-tst-sub, .occ-tst-ho) form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		align-items: start;
		max-width: 760px;
	}

	.occ-asg-page :is(.occ-tst-sub, .occ-tst-ho) form > * {
		grid-column: 1 / -1;
	}

	.occ-asg-page :is(.occ-tst-sub, .occ-tst-ho) form > input[type="hidden"] {
		display: none;
	}

	.occ-asg-page :is(.occ-tst-sub, .occ-tst-ho) form > p:has(#occ-tst-sub-worker, #occ-tst-sub-reason, #occ-tst-ho-worker, #occ-tst-ho-start) {
		grid-column: auto;
	}

	.occ-asg-page :is(.occ-tst-sub, .occ-tst-ho) form :is(select, input[type="text"], input[type="date"]) {
		max-width: none;
		width: 100%;
	}
}

/*
 * b10.888: the gaps left after b10.886 against boards 11 to 13.
 */

/* A tip beside its label also inside the form paragraphs (the label rule at the top is stronger). */
.occ-asg-page form p > label:not(:has(input[type="checkbox"])):has(+ .occ-tip) {
	display: inline-block;
	margin-right: 6px;
}

/* Change staff member: the job title on the name's line. */
.occ-asg-page .occ-tst-change-head strong + .occ-asg-sub {
	display: inline;
	margin: 0;
	font-size: 14px;
}

/* The reason in your own words shows for Other only. */
.occ-asg-page form:not(:has(#occ-tst-sub-reason option[value="other"]:checked)) #occ-tst-sub-text,
.occ-asg-page form:not(:has(#occ-th-reason option[value="other"]:checked)) #occ-th-reason-text {
	display: none;
}

/* What stays the same, in a blue box (boards 11 and 12). */
.occ-asg-page .occ-tst-box-info {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #eef2f9;
	color: #1d3d66;
	font-size: 14px;
	line-height: 1.5;
}

/* Letters fields short on the Clients page too (its column rule is stronger). */
.occ-asg-page .occ-cc-col input.occ-cc-code-letters:not([type="checkbox"]):not([type="radio"]):not([type="tel"]) {
	width: 140px;
	max-width: 100%;
}

/* Assignment codes card: Next code this month, as board 13. */
.occ-asg-page .occ-tst-code-next .occ-tst-label {
	margin-right: 10px;
}

/* ------------------------------------------------ My timesheets, periods
 * D-413 (Philipp, 2026-10-03; canvas board 14): the staff member's list with
 * a small, read-only payroll calendar beside it; on a phone the calendar sits
 * above the list. The last day of each of their periods is marked in amber.
 */
.occ-asg-page .occ-ts-employee-cols {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 16px;
	align-items: start;
}

.occ-asg-page .occ-ts-employee-cols.is-single {
	grid-template-columns: minmax(0, 1fr);
}

.occ-asg-page .occ-ts-employee-main > .occ-asg-section:first-child,
.occ-asg-page .occ-ts-employee-cal .occ-pc.is-compact {
	margin-top: 0;
}

@media (max-width: 900px) {
	.occ-asg-page .occ-ts-employee-cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.occ-asg-page .occ-ts-employee-cal {
		order: -1;
	}
}

.occ-asg-page .occ-pc.is-compact .occ-pc-body {
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.occ-asg-page .occ-pc.is-compact .occ-pc-bar {
	gap: 6px;
	margin: 0 0 8px;
}

.occ-asg-page .occ-pc.is-compact .occ-pc-month {
	flex: 1;
	min-width: 0;
	font-size: 15px;
}

.occ-asg-page .occ-pc.is-compact a.occ-pc-nav {
	width: 32px;
	height: 32px;
	font-size: 18px;
}

.occ-asg-page .occ-pc.is-compact .occ-pc-rule {
	flex-basis: 100%;
	order: 5;
	margin-left: 0;
	font-size: 12px;
}

.occ-asg-page .occ-pc.is-compact table.occ-pc-grid {
	border-spacing: 3px 3px;
}

.occ-asg-page .occ-pc.is-compact table.occ-pc-grid thead th:first-child,
.occ-asg-page .occ-pc.is-compact table.occ-pc-grid th.occ-pc-num {
	width: 42px;
}

.occ-asg-page .occ-pc.is-compact table.occ-pc-grid td {
	height: 30px;
	font-size: 12px;
}

.occ-asg-page .occ-pc.is-compact .occ-pc-chip {
	min-width: 38px;
	height: 22px;
}

.occ-asg-page .occ-pc.is-compact .occ-pc-bar-line {
	width: 3px;
	height: 32px;
	margin-top: -10px;
}

.occ-asg-page .occ-pc.is-compact .occ-pc-list {
	min-height: 0;
}

.occ-asg-page .occ-pc.is-compact .occ-pc-list > ul {
	position: static;
	overflow: visible;
}

.occ-asg-page .occ-pc.is-compact .occ-pc-legend {
	gap: 12px;
	font-size: 12px;
}

/* Open and edit / View show on the current period and on the one picked in the list. */
.occ-asg-page .occ-pc.is-compact .occ-pc-p-open {
	display: none;
}

.occ-asg-page .occ-pc.is-compact li.is-picked .occ-pc-p-open,
.occ-asg-page .occ-pc.is-compact li.is-current .occ-pc-p-open {
	display: inline-flex;
}

@media (max-width: 900px) {
	.occ-asg-page .occ-pc.is-compact table.occ-pc-grid td {
		height: 34px;
	}
}

/* ------------------------------------------------ D-414 (boards 15 and 16)
 * Assignments: the client filter beside the find box, the "2 at once" chip.
 * Payroll notifications: the sample's rule switch, the other rules' dates
 * under each Next line.
 */
.occ-asg-page .occ-tst-toolbar .occ-tst-find select.occ-tst-client {
	height: var(--occ-ui-field-h);
	min-width: 200px;
	margin: 0 0 0 10px;
	padding: 0 32px 0 12px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 8px;
	background-color: #fff;
	color: #344054;
	font-size: 14px;
}

.occ-asg-page .occ-tst-at-once {
	margin-left: 6px;
}

.occ-asg-page .occ-pn .occ-pn-sample-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 10px;
}

.occ-asg-page .occ-pn .occ-pn-sample-top .occ-pn-sample-title {
	margin: 0;
}

.occ-asg-page .occ-pn .occ-pn-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.occ-asg-page .occ-pn .occ-pn-switch a {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background: #fff;
	color: #475467;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.occ-asg-page .occ-pn .occ-pn-switch a.is-current {
	border-color: #101828;
	background: #101828;
	color: #fff;
}

.occ-asg-page .occ-pn .occ-pn-next .occ-pn-next-other {
	display: block;
	color: #667085;
}

/* D-414, seen on MIRROR at b10.896: with the client filter beside it the find box kept room for its placeholder. */
.occ-asg-page .occ-tst-toolbar .occ-tst-find input[type="search"] {
	min-width: 240px;
}

/* ------------------------------------------------ b10.900 (board 17)
 * My timesheets: the period as the calendar names it ("PP 39 Sep 21 to
 * Sep 27, 2026"), and on a phone one card per timesheet with its button in
 * view; the company line only when there is more than one company.
 */
.occ-asg-page .occ-ts-employee-main table.occ-ts-employee-list td.occ-ts-list-period {
	white-space: nowrap;
}

.occ-asg-page .occ-ts-employee-list td.occ-ts-list-period strong {
	margin-right: 6px;
	color: #202124;
}

.occ-asg-page .occ-ts-employee-list .occ-ts-list-range {
	color: var(--occ-ui-text-3);
}

.occ-asg-page .occ-pc-p-start {
	display: inline-flex;
	margin: 0;
}

@media (max-width: 600px) {
	.occ-asg-page .occ-ts-employee-main table.occ-ts-employee-list thead {
		display: none;
	}

	.occ-asg-page .occ-ts-employee-main table.occ-ts-employee-list,
	.occ-asg-page .occ-ts-employee-main table.occ-ts-employee-list tbody {
		display: block;
		width: 100%;
	}

	.occ-asg-page .occ-ts-employee-main table.occ-ts-employee-list tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px 10px;
		align-items: center;
		margin: 0 0 8px;
		padding: 12px 14px;
		border: 1px solid #ecedf2;
		border-radius: 8px;
		background: #fff;
	}

	.occ-asg-page .occ-ts-employee-main table.occ-ts-employee-list tbody tr > td {
		display: block;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		white-space: normal;
	}

	.occ-asg-page .occ-ts-employee-main table.occ-ts-employee-list tbody tr > td.occ-ts-list-period,
	.occ-asg-page .occ-ts-employee-main table.occ-ts-employee-list tbody tr > td.occ-ts-list-company {
		grid-column: 1 / -1;
	}

	.occ-asg-page .occ-ts-employee-main table.occ-ts-employee-list.is-one-company tbody tr > td.occ-ts-list-company {
		display: none;
	}

	.occ-asg-page .occ-ts-employee-main table.occ-ts-employee-list tbody tr > td.occ-ts-list-open {
		text-align: right;
	}
}

/* ------------------------------------------------ b10.902 (D-416; board 18b)
 * My assignment: the timesheet panel leads with the one red button; the rest
 * sits in one card with thin dividers; two assignments are tabs; on a phone
 * the columns stack and Directions and Call are full-width buttons.
 */
.occ-asg-page.occ-my-assignment .occ-ma-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px;
	margin: 10px 0 6px;
}

.occ-asg-page.occ-my-assignment button.occ-ma-tab {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #ecedf2;
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.occ-asg-page.occ-my-assignment button.occ-ma-tab[aria-selected="true"] {
	border-color: var(--occ-ui-dot-navy);
	box-shadow: inset 0 0 0 1px var(--occ-ui-dot-navy);
	background: #f5f8fd;
}

.occ-asg-page.occ-my-assignment .occ-ma-tab-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	font-size: 13px;
	color: var(--occ-ui-muted);
}

.occ-asg-page.occ-my-assignment .occ-ma-tab-text strong {
	font-size: 14px;
	color: #202124;
}

.occ-asg-page.occ-my-assignment .occ-ma-tabs-note {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--occ-ui-muted);
}

.occ-asg-page.occ-my-assignment .occ-ma-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #fbeef0;
	color: var(--occ-ui-brand);
}

.occ-asg-page.occ-my-assignment .occ-ma-icon svg {
	width: 18px;
	height: 18px;
}

.occ-asg-page.occ-my-assignment .occ-ma-icon--big {
	width: 46px;
	height: 46px;
}

.occ-asg-page.occ-my-assignment .occ-ma-icon--big svg {
	width: 22px;
	height: 22px;
}

.occ-asg-page.occ-my-assignment section.occ-ma-card {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0 0 24px;
	padding: 24px;
	border: 1px solid #ecedf2;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 15px rgba(64, 79, 104, .05);
}

.occ-asg-page.occ-my-assignment section.occ-ma-card[hidden] {
	display: none;
}

.occ-asg-page.occ-my-assignment header.occ-my-assignment-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 14px;
	align-items: center;
}

.occ-asg-page.occ-my-assignment header.occ-my-assignment-item h3.occ-asg-title {
	grid-column: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 20px;
}

.occ-asg-page.occ-my-assignment header.occ-my-assignment-item .occ-ma-head-sub {
	grid-column: 1;
	margin: 2px 0 0 50px;
	font-size: 14px;
	color: var(--occ-ui-muted);
}

.occ-asg-page.occ-my-assignment header.occ-my-assignment-item .occ-ma-status {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-size: 13px;
}

.occ-asg-page.occ-my-assignment .occ-ma-hero {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid #d5e3f6;
	border-radius: 12px;
	background: #f5f8fd;
}

.occ-asg-page.occ-my-assignment .occ-ma-hero-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.occ-asg-page.occ-my-assignment .occ-ma-hero-text {
	flex: 1;
	min-width: 230px;
}

.occ-asg-page.occ-my-assignment .occ-ma-hero-text p {
	margin: 0 0 6px;
}

.occ-asg-page.occ-my-assignment .occ-ma-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-muted);
}

.occ-asg-page.occ-my-assignment .occ-ma-pp {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--occ-ui-dot-navy);
	color: #fff;
	font-size: 12px;
}

.occ-asg-page.occ-my-assignment .occ-ma-hero-title {
	font-family: Poppins, Arial, sans-serif;
	font-size: 19px;
	font-weight: 500;
	color: #202124;
}

.occ-asg-page.occ-my-assignment .occ-ma-hero-state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #344054;
}

.occ-asg-page.occ-my-assignment .occ-ma-go {
	margin: 0;
}

.occ-asg-page.occ-my-assignment .occ-ma-hero-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	padding-top: 12px;
	border-top: 1px solid #d5e3f6;
	font-size: 13px;
	color: #344054;
}

.occ-asg-page.occ-my-assignment .occ-ma-links {
	display: flex;
	gap: 18px;
	margin-left: auto;
}

.occ-asg-page.occ-my-assignment :is(.occ-ma-links a, a.occ-ma-link, button.occ-ma-link) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--occ-ui-dot-navy);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.occ-asg-page.occ-my-assignment :is(.occ-ma-links a, a.occ-ma-link, button.occ-ma-link):is(:hover, :focus) {
	text-decoration: underline;
}

.occ-asg-page.occ-my-assignment .occ-ma-cols {
	display: grid;
	gap: 0;
}

.occ-asg-page.occ-my-assignment .occ-ma-cols--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.occ-asg-page.occ-my-assignment .occ-ma-cols--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding-top: 18px;
	border-top: 1px solid #ecedf2;
}

.occ-asg-page.occ-my-assignment .occ-ma-sec {
	padding: 0 22px;
	border-left: 1px solid #ecedf2;
}

.occ-asg-page.occ-my-assignment .occ-ma-sec:first-child {
	padding-left: 0;
	border-left: 0;
}

.occ-asg-page.occ-my-assignment .occ-ma-sec h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-family: Poppins, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #202124;
}

.occ-asg-page.occ-my-assignment .occ-ma-sec p {
	margin: 0 0 10px;
}

.occ-asg-page.occ-my-assignment .occ-ma-sec p.occ-ma-k {
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-muted);
}

.occ-asg-page.occ-my-assignment .occ-ma-v {
	font-size: 14px;
	line-height: 1.45;
	color: #202124;
}

.occ-asg-page.occ-my-assignment .occ-ma-sub {
	font-size: 12px;
	color: var(--occ-ui-muted);
}

.occ-asg-page.occ-my-assignment .occ-ma-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 4px;
}

.occ-asg-page.occ-my-assignment a.occ-ma-tap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--occ-ui-dot-navy);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.occ-asg-page.occ-my-assignment a.occ-ma-tap svg {
	width: 14px;
	height: 14px;
}

.occ-asg-page.occ-my-assignment ul.occ-ma-list {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.occ-asg-page.occ-my-assignment ul.occ-ma-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 8px 0;
	border-top: 1px solid #f0f1f4;
	font-size: 13px;
	color: #344054;
}

.occ-asg-page.occ-my-assignment ul.occ-ma-changes li {
	justify-content: flex-start;
}

.occ-asg-page.occ-my-assignment .occ-ma-when {
	flex: 0 0 64px;
	color: var(--occ-ui-muted);
}

.occ-asg-page.occ-my-assignment .occ-ma-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding-top: 14px;
	border-top: 1px solid #ecedf2;
	font-size: 13px;
	color: var(--occ-ui-muted);
}

@media (max-width: 760px) {
	.occ-asg-page.occ-my-assignment section.occ-ma-card {
		padding: 16px;
	}

	.occ-asg-page.occ-my-assignment header.occ-my-assignment-item {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
	}

	.occ-asg-page.occ-my-assignment header.occ-my-assignment-item .occ-ma-status {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}

	.occ-asg-page.occ-my-assignment .occ-ma-hero {
		padding: 14px;
	}

	.occ-asg-page.occ-my-assignment .occ-ma-go,
	.occ-asg-page.occ-my-assignment .occ-ma-go .occ-ma-primary {
		width: 100%;
		text-align: center;
	}

	.occ-asg-page.occ-my-assignment .occ-ma-links {
		margin-left: 0;
	}

	.occ-asg-page.occ-my-assignment :is(.occ-ma-cols--3, .occ-ma-cols--2) {
		grid-template-columns: minmax(0, 1fr);
	}

	.occ-asg-page.occ-my-assignment .occ-ma-sec,
	.occ-asg-page.occ-my-assignment .occ-ma-sec:first-child {
		padding: 16px 0 0;
		border-left: 0;
	}

	.occ-asg-page.occ-my-assignment .occ-ma-sec + .occ-ma-sec {
		margin-top: 16px;
		border-top: 1px solid #ecedf2;
	}

	.occ-asg-page.occ-my-assignment a.occ-ma-tap {
		justify-content: center;
		width: 100%;
		min-height: 44px;
		border: 1px solid var(--occ-ui-border);
		border-radius: 8px;
		color: #344054;
	}
}

/* ------------------------------------------------ D-417 (b10.906) timesheet Summary card, board 19b */

.occ-asg-page.occ-ts-employee .occ-ts-sum {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 14px;
	align-items: center;
}

.occ-asg-page.occ-ts-employee .occ-ts-sum > h3.occ-asg-title {
	grid-column: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 18px;
}

.occ-asg-page.occ-ts-employee .occ-ts-sum-sub {
	grid-column: 1;
	margin: 2px 0 0 50px;
	font-size: 13px;
	color: var(--occ-ui-muted);
}

.occ-asg-page.occ-ts-employee .occ-ts-sum-status {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
}

.occ-asg-page.occ-ts-employee .occ-ts-sum-status .occ-ui-chip {
	font-size: 13px;
	padding: 5px 12px;
}

.occ-asg-page.occ-ts-employee dl.occ-ts-sum-facts {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 16px 0 0;
	padding: 0;
	border: 1px solid #ecedf2;
	border-radius: 10px;
	overflow: hidden;
	background: #ecedf2;
}

.occ-asg-page.occ-ts-employee dl.occ-ts-sum-facts.is-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.occ-asg-page.occ-ts-employee dl.occ-ts-sum-facts > div {
	margin: 0;
	padding: 12px 16px;
	background: #fff;
	min-width: 0;
}

.occ-asg-page.occ-ts-employee dl.occ-ts-sum-facts dt {
	margin: 0 0 3px;
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-muted);
}

.occ-asg-page.occ-ts-employee dl.occ-ts-sum-facts dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	color: var(--occ-ui-text);
	overflow-wrap: anywhere;
}

@media (max-width: 760px) {
	.occ-asg-page.occ-ts-employee .occ-ts-sum {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
	}

	.occ-asg-page.occ-ts-employee .occ-ts-sum-status {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}

	.occ-asg-page.occ-ts-employee dl.occ-ts-sum-facts,
	.occ-asg-page.occ-ts-employee dl.occ-ts-sum-facts.is-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 8px;
	}

	.occ-asg-page.occ-ts-employee dl.occ-ts-sum-facts.is-3 > div:last-child {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------ b10.908: the timesheet at laptop widths */

/*
 * b10.908 (board 17 notes, Philipp 2026-10-04): a stat holiday's name kept the
 * Day column at 251px on one line, so at 1568px the row ran past its box and
 * Add another shift and Same as the day before were cut off. The name wraps.
 */
.occ-asg-page .occ-ts-period th.occ-ts-day {
	width: 130px;
	max-width: 150px;
}

.occ-asg-page .occ-ts-period th.occ-ts-day :is(.occ-ts-stat-day, .occ-ts-future-day, .occ-ts-planned-day) {
	white-space: normal;
}

/*
 * The four tiles above the hours: four in a row only when each has room for
 * "40 h 00 min" beside its icon, two by two below that. Measured by the box
 * they sit in, not the screen, since the calendar can sit beside it.
 */
.occ-asg-page .occ-ts-live {
	container-type: inline-size;
}

.occ-asg-page .occ-ts-live .occ-asg-stat {
	padding: 20px;
}

.occ-asg-page .occ-ts-live .occ-asg-stat-icon {
	flex-basis: 56px;
	width: 56px;
	height: 56px;
}

.occ-asg-page .occ-ts-live .occ-asg-stat-icon .occ-asg-icon {
	width: 24px;
	height: 24px;
}

@container (max-width: 1099px) {
	.occ-asg-page .occ-ts-live .occ-asg-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row;
		gap: 15px 20px;
	}
}

@container (max-width: 559px) {
	.occ-asg-page .occ-ts-live .occ-asg-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.occ-asg-page .occ-ts-live .occ-asg-stat {
		padding: 15px;
	}
}

/*
 * Between a phone and a wide screen the table has no room for seven columns:
 * each shift becomes two lines in its own box. The day, the times, the break
 * and the hours on the first line; the buttons under the day and the ticks
 * beside them on the second. The header keeps its first five labels.
 */
.occ-asg-page .occ-ts-table-wrap {
	container-type: inline-size;
}

@container (min-width: 580px) and (max-width: 1039px) {
	.occ-asg-page table.occ-ts-period {
		display: block;
		min-width: 0;
	}

	.occ-asg-page .occ-ts-period :is(thead, tbody) {
		display: block;
	}

	.occ-asg-page .occ-ts-period thead tr,
	.occ-asg-page .occ-ts-period tr.occ-ts-shift {
		display: grid;
		grid-template-columns: minmax(150px, 1.3fr) repeat(2, minmax(110px, 1fr)) minmax(64px, .7fr) minmax(64px, .7fr);
		column-gap: 12px;
		align-items: start;
	}

	.occ-asg-page .occ-ts-period thead tr > :nth-child(n+6) {
		display: none;
	}

	.occ-asg-page .occ-ts-period thead tr {
		border-radius: 8px;
		background: #f9fafb;
	}

	.occ-asg-page .occ-ts-period thead tr > th {
		display: block;
		padding: 8px 0;
		border-radius: 0;
		background: none;
	}

	.occ-asg-page .occ-ts-period thead tr > th:first-child {
		padding-left: 12px;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-week-head,
	.occ-asg-page .occ-ts-period tr.occ-ts-week-head > th {
		display: block;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-shift {
		row-gap: 10px;
		margin: 0 0 10px;
		padding: 12px;
		border: 1px solid #ecedf2;
		border-radius: 8px;
		background: #fcfcfe;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-shift > :is(th, td) {
		display: block;
		width: auto;
		max-width: none;
		min-width: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-shift > th.occ-ts-day {
		grid-column: 1;
		grid-row: 1;
		padding-top: 10px;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-shift > td.occ-ts-net {
		padding-top: 10px;
	}

	.occ-asg-page .occ-ts-period .occ-ts-time input,
	.occ-asg-page .occ-ts-period .occ-ts-break input {
		width: 100%;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-shift > td.occ-ts-actions {
		grid-column: 1;
		grid-row: 2;
		text-align: left;
		white-space: normal;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-shift > td.occ-ts-actions .button {
		width: auto;
		max-width: 100%;
	}

	.occ-asg-page .occ-ts-period tr.occ-ts-shift > td.occ-ts-extras {
		grid-column: 2 / -1;
		grid-row: 2;
		min-width: 0;
	}
}

/* ------------------------------------------------ b10.910 (Philipp's check, 2026-10-04)
 * Assignments: the find box, its button and the client filter kept to 420px,
 * so the client filter ran under Current / Ended / All. The form takes the room
 * its three parts need and wraps on a narrow screen.
 */
.occ-asg-page .occ-ct-toolbar-top.occ-tst-toolbar form.occ-tst-find {
	flex: 0 1 auto;
	flex-wrap: nowrap;
	row-gap: 8px;
	max-width: 100%;
}

/* b10.912, seen on MIRROR at b10.910: the find box grew and pushed the client filter onto a second line. */
.occ-asg-page .occ-ct-toolbar-top.occ-tst-toolbar form.occ-tst-find input[type="search"] {
	flex: 0 1 240px;
	width: 240px;
}

@media (max-width: 760px) {
	.occ-asg-page .occ-ct-toolbar-top.occ-tst-toolbar form.occ-tst-find {
		flex-wrap: wrap;
	}

	.occ-asg-page .occ-ct-toolbar-top.occ-tst-toolbar form.occ-tst-find select.occ-tst-client {
		margin-left: 0;
	}
}

/* -------------------------------------------------------------- People
 * D-432, mockup boards 5 to 8: contacts, logins and invitations as one card,
 * one line per person, icon buttons with their names for screen readers and
 * on hover, and a legend for anyone new to the card.
 */
.occ-asg-page .occ-pc-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.occ-asg-page button.occ-pc-add {
	display: inline-flex;
	align-items: center;
	height: auto;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--occ-ui-border);
	border-radius: 8px;
	background: var(--occ-ui-white);
	box-shadow: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	color: var(--occ-ui-text-2);
	text-decoration: none;
	cursor: pointer;
}

.occ-asg-page button.occ-pc-add:is(:hover, :focus) {
	background: var(--occ-ui-fill-soft);
	color: var(--occ-ui-text);
}

.occ-asg-page .occ-pc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 8px 0 4px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--occ-ui-muted);
}

.occ-asg-page .occ-pc-legend li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
}

.occ-asg-page .occ-pc-legend svg {
	width: 14px;
	height: 14px;
}

.occ-asg-page .occ-pc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.occ-asg-page .occ-pc-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) auto;
	align-items: center;
	gap: 8px 14px;
	margin: 0;
	padding: 9px 0;
	border-top: 1px solid var(--occ-ui-line);
}

.occ-asg-page .occ-pc-who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-width: 0;
}

.occ-asg-page .occ-pc-name {
	font-weight: 600;
	color: var(--occ-ui-text);
}

.occ-asg-page .occ-pc-tag {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 6px;
	background: var(--occ-ui-fill-soft);
	font-size: 11.5px;
	color: var(--occ-ui-text-2);
	white-space: nowrap;
}

.occ-asg-page .occ-pc-tag--login {
	border-style: dashed;
}

.occ-asg-page a.occ-pc-email {
	font-size: 12.5px;
	color: var(--occ-ui-muted);
	text-decoration: none;
	word-break: break-all;
}

.occ-asg-page a.occ-pc-email:is(:hover, :focus) {
	text-decoration: underline;
}

.occ-asg-page .occ-pc-state {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.occ-asg-page .occ-pc-note {
	font-size: 12px;
	line-height: 1.35;
	color: var(--occ-ui-muted);
}

.occ-asg-page .occ-pc-acts {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}

.occ-asg-page .occ-pc-acts form {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.occ-asg-page button.occ-pc-ib {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--occ-ui-border);
	border-radius: 8px;
	background: var(--occ-ui-white);
	box-shadow: none;
	color: var(--occ-ui-text-2);
	cursor: pointer;
}

.occ-asg-page button.occ-pc-ib:is(:hover, :focus) {
	background: var(--occ-ui-fill-soft);
	color: var(--occ-ui-text);
}

.occ-asg-page button.occ-pc-ib--go {
	border-color: #c7a4ab;
	color: var(--occ-ui-brand);
}

.occ-asg-page button.occ-pc-ib--off {
	border-color: #fda29b;
	color: #b42318;
}

.occ-asg-page .occ-pc-box-title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	color: var(--occ-ui-text);
}

.occ-asg-page .occ-cc-confirm.occ-pc-box--wide[popover] {
	width: min(640px, calc(100vw - 32px));
}

.occ-asg-page .occ-pc-box-foot {
	margin: 10px 0 0;
	text-align: right;
}

.occ-asg-page .occ-pc-box-foot button.occ-access-button {
	padding: 8px 14px;
	border: 1px solid var(--occ-ui-border);
	border-radius: 8px;
	background: var(--occ-ui-white);
	font-size: 13px;
	font-weight: 600;
	color: var(--occ-ui-text-2);
	cursor: pointer;
}

.occ-asg-page .occ-cc-confirm form.occ-cc-confirm-form > input[type="text"] {
	box-sizing: border-box;
	width: 100%;
}

.occ-asg-page .occ-pc-as {
	margin: 0;
	padding: 0;
	border: 0;
}

.occ-asg-page .occ-pc-as legend {
	margin: 0 0 4px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--occ-ui-text-2);
}

.occ-asg-page .occ-pc-as-opt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 400;
}

.occ-asg-page .occ-pc-as-opt:has(input:disabled) {
	opacity: .6;
}

.occ-asg-page .occ-cc-confirm .occ-cc-confirm-actions button.occ-access-button.occ-pc-danger[type="submit"] {
	border-color: #b42318;
	background: #b42318;
	color: #fff;
}

.occ-asg-page .occ-cc-confirm .occ-cc-confirm-actions button.occ-access-button.occ-pc-danger[type="submit"]:is(:hover, :focus) {
	border-color: #912018;
	background: #912018;
}

.occ-asg-page .occ-pc-inactive {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--occ-ui-line);
}

.occ-asg-page .occ-pc-inactive > summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--occ-ui-muted);
}

.occ-asg-page a.occ-cc-docs {
	text-decoration: none;
}

@media (max-width: 720px) {
	.occ-asg-page .occ-pc-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.occ-asg-page .occ-pc-state {
		grid-column: 1;
		grid-row: 2;
	}

	.occ-asg-page .occ-pc-acts {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}