h1:focus {
    outline: none;
}

.form-control.invalid,
.form-select.invalid,
.form-check-input.invalid,
.mb-3:has(.validation-message) > .form-control,
.mb-3:has(.validation-message) > .form-select,
.mb-3:has(.validation-message) .searchable-select .form-control,
.col-md-6:has(.validation-message) .form-control,
.col-md-6:has(.validation-message) .form-select,
.col-12:has(.validation-message) .form-control,
.hire-pricing-fields:has(+ .validation-message) .form-control,
.hire-pricing-fields:has(+ .validation-message) .form-select,
.searchable-select:has(+ .validation-message) .form-control {
    border-color: var(--woh-danger);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.form-control.invalid:focus,
.form-select.invalid:focus,
.mb-3:has(.validation-message) > .form-control:focus,
.mb-3:has(.validation-message) > .form-select:focus,
.searchable-select:has(+ .validation-message) .form-control:focus {
    border-color: var(--woh-danger);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18);
}

.validation-message,
.field-error {
    display: block;
    margin-top: 0.35rem;
    color: var(--woh-danger);
    font-size: 0.8125rem;
    font-weight: 600;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1.25rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Hidden by default; Blazor JS shows this only when a circuit error occurs. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

body:has(#components-reconnect-modal[open]) #blazor-error-ui {
    display: none !important;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

:root {
    --woh-orange: #e84e16;
    --woh-orange-hover: #c73f10;
    --woh-orange-soft: #fff1eb;
    --woh-orange-mid: #f08a5c;
    --woh-primary: var(--woh-orange);
    --woh-primary-hover: var(--woh-orange-hover);
    --woh-primary-soft: var(--woh-orange-soft);
    --woh-secondary: #3a94bc;
    --woh-secondary-hover: #2d7ea3;
    --woh-secondary-soft: #eaf6fb;
    --woh-secondary-mid: #86c4dd;
    --woh-ink: #181a1d;
    --woh-charcoal: #1a1d21;
    --woh-hero: #111317;
    --woh-white: #ffffff;
    --woh-subtle: #f7f7f8;
    --woh-hover: #f3f4f6;
    --woh-selected: #eceef1;
    --woh-muted: #626872;
    --woh-faint: #8b919a;
    --woh-line: #e4e6e9;
    --woh-line-strong: #d3d6da;
    --woh-cream: var(--woh-white);
    --woh-paper: var(--woh-subtle);
    --woh-teal: #0d6b5c;
    --woh-teal-bg: #e8f5f2;
    --woh-amber: #8a4b10;
    --woh-amber-bg: #fff4e5;
    --woh-radius: 10px;
    --woh-radius-sm: 8px;
    --woh-shadow: none;
    --woh-shadow-hover: none;
    --woh-shadow-float: 0 10px 28px rgba(17, 19, 24, 0.14);
    --woh-font: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --woh-page: var(--woh-white);
    --woh-bg: var(--woh-white);
    --woh-surface: var(--woh-white);
    --woh-text: var(--woh-ink);
    --woh-text-muted: var(--woh-muted);
    --woh-border: var(--woh-line);
    --woh-warning: #8a4b10;
    --woh-warning-bg: #fff4e5;
    --woh-warning-border: #ead7b8;
    --woh-danger: #b42318;
    --woh-danger-muted: #c45a52;
    --woh-danger-bg: #fdecea;
    --woh-success: #2f6f4e;
    --woh-success-bg: #e8f3ec;
    --woh-neutral: #3d4450;
    --woh-neutral-bg: #eceef1;
    --woh-info: #3d5673;
    --woh-info-bg: #eef2f6;
    --woh-space-1: 0.25rem;
    --woh-space-2: 0.5rem;
    --woh-space-3: 0.75rem;
    --woh-space-4: 1rem;
    --woh-space-5: 1.5rem;
    --woh-space-6: 2rem;
    --woh-space-8: 2.5rem;
    --woh-control-height: 2.625rem;
    --woh-control-height-sm: 2.25rem;
    --woh-focus-ring: 0 0 0 3px rgba(232, 78, 22, 0.18);
    --woh-transition: 140ms ease;
    --woh-content-wide: 85rem;
    --woh-content-max: 48rem;
    --woh-header-max: 85rem;
    --woh-sidebar-width: 15.5rem;
    --woh-sidebar-collapsed: 4.25rem;
    --woh-topbar-height: 3rem;
    --woh-mobile-bar: 4rem;
    --ph-navy: var(--woh-charcoal);
    --ph-navy-dark: var(--woh-hero);
    --ph-amber: var(--woh-orange);
    --ph-amber-soft: var(--woh-orange-soft);
    --ph-green: var(--woh-success);
    --ph-slate: var(--woh-muted);
    --ph-bg: var(--woh-page);
    --bs-primary: #e84e16;
    --bs-primary-rgb: 232, 78, 22;
    --bs-link-color: #14161a;
    --bs-link-hover-color: #14161a;
    --bs-body-bg: #ffffff;
    --bs-body-color: #181a1d;
    --bs-border-radius: 0.5rem;
    --bs-border-color: #e4e6e9;
    --bs-secondary-color: #626872;
}

html {
    background: var(--woh-bg);
    font-size: 16px;
}

html:has(.app-shell.has-app-nav),
html:has(.app-shell.has-app-nav) body {
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--woh-bg);
    color: var(--woh-text);
    font-family: var(--woh-font);
    font-size: 14px;
    font-weight: 450;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
}

:focus-visible {
    outline: 2px solid var(--woh-orange);
    outline-offset: 3px;
}

a {
    color: var(--woh-text);
    font-weight: 600;
    text-decoration: none;
}

a:hover {
    color: var(--woh-ink);
}

.app-shell {
    min-height: 100vh;
}

.app-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1rem 1rem 1.5rem;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .app-content {
        padding: 1.75rem 2rem 2.5rem;
    }
}

.page-detail {
    max-width: var(--woh-content-wide);
    margin: 0;
}

.app-header {
    position: relative;
    z-index: 20;
    background: var(--woh-hero);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-header-inner {
    width: 100%;
    max-width: var(--woh-header-max);
    margin: 0 auto;
    padding: 0.45rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    box-sizing: border-box;
}

.brand {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
}

.brand:hover {
    color: #fff;
}

.brand-wordmark {
    display: block;
    width: auto;
    height: 1.7rem;
}

.app-nav-shell {
    display: contents;
}

.nav-toggle-check {
    display: none;
}

.nav-toggle {
    order: 3;
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    border-radius: var(--woh-radius-sm);
    padding: 0;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.nav-toggle-check:not(:checked) ~ .nav-toggle .nav-icon-close,
.nav-toggle-check:checked ~ .nav-toggle .nav-icon-open {
    display: none;
}

.app-nav {
    display: none;
    width: 100%;
    order: 4;
    flex-direction: column;
    gap: 0.1rem;
}

.nav-toggle-check:checked ~ .app-nav {
    display: flex;
}

.app-nav .nav-link {
    --bs-nav-link-padding-y: 0;
    --bs-nav-link-padding-x: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    text-decoration: none;
}

.app-nav .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.app-nav .nav-link.active {
    color: #fff;
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--woh-orange);
    border-radius: 0;
}

.account-menu {
    position: relative;
    margin-left: auto;
    order: 2;
}

.account-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.25rem;
    padding: 0 0.55rem 0 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

.account-menu > summary::-webkit-details-marker {
    display: none;
}

.account-menu > summary:hover,
.account-menu[open] > summary {
    background: rgba(255, 255, 255, 0.1);
}

.account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: #fff;
    color: var(--woh-ink);
    font-size: 0.8rem;
    font-weight: 700;
}

.account-name {
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu > summary .bi-chevron-down {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    line-height: 1;
    opacity: 0.75;
}

.account-menu-panel {
    position: absolute;
    right: 0;
    z-index: 60;
    min-width: 11rem;
    margin-top: 0.35rem;
    padding: 0.3rem;
    background: var(--woh-surface);
    border: 1px solid var(--woh-border);
    border-radius: var(--woh-radius-sm);
    box-shadow: var(--woh-shadow-float);
}

.account-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    color: var(--woh-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
    background: rgba(20, 22, 26, 0.05);
    color: var(--woh-ink);
}

.btn {
    --woh-btn-height: var(--woh-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--woh-btn-height);
    min-height: var(--woh-btn-height);
    padding: 0 0.9rem;
    border-radius: var(--woh-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color var(--woh-transition), border-color var(--woh-transition), color var(--woh-transition), box-shadow var(--woh-transition);
}

a.btn,
a.btn:hover,
a.btn:focus-visible {
    color: var(--bs-btn-color);
    text-decoration: none;
}

a.btn:hover,
a.btn:focus-visible {
    color: var(--bs-btn-hover-color);
}

.btn:focus-visible {
    outline: 2px solid var(--woh-orange);
    outline-offset: 2px;
    box-shadow: none;
}

.btn-sm {
    --woh-btn-height: var(--woh-control-height-sm);
    height: var(--woh-btn-height);
    min-height: var(--woh-btn-height);
    padding: 0 0.7rem;
    font-size: 0.8125rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--woh-primary);
    --bs-btn-border-color: var(--woh-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--woh-primary-hover);
    --bs-btn-hover-border-color: var(--woh-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--woh-primary-hover);
    --bs-btn-active-border-color: var(--woh-primary-hover);
    --bs-btn-focus-shadow-rgb: 232, 78, 22;
}

.btn-secondary {
    --bs-btn-color: var(--woh-secondary-hover);
    --bs-btn-bg: var(--woh-secondary-soft);
    --bs-btn-border-color: var(--woh-secondary-mid);
    --bs-btn-hover-color: var(--woh-secondary-hover);
    --bs-btn-hover-bg: #d5eef8;
    --bs-btn-hover-border-color: var(--woh-secondary);
    --bs-btn-active-color: var(--woh-secondary-hover);
    --bs-btn-active-bg: #c7e7f4;
    --bs-btn-active-border-color: var(--woh-secondary);
    --bs-btn-focus-shadow-rgb: 58, 148, 188;
}

.btn-outline-primary {
    --bs-btn-color: var(--woh-primary);
    --bs-btn-border-color: var(--woh-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--woh-primary);
    --bs-btn-hover-border-color: var(--woh-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--woh-primary);
    --bs-btn-active-border-color: var(--woh-primary);
}

.btn-row-action {
    --woh-btn-height: 1.85rem;
    height: var(--woh-btn-height);
    min-height: var(--woh-btn-height);
    padding: 0 0.65rem;
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto;
    background-color: #fff;
}

.btn-row-action.btn-outline-primary:hover,
.btn-row-action.btn-outline-primary:focus-visible {
    background-color: var(--woh-primary);
    color: #fff;
}

.btn-outline-secondary {
    --bs-btn-color: var(--woh-secondary);
    --bs-btn-border-color: var(--woh-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--woh-secondary);
    --bs-btn-hover-border-color: var(--woh-secondary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--woh-secondary-hover);
    --bs-btn-active-border-color: var(--woh-secondary-hover);
}

.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.22);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-danger {
    --bs-btn-color: var(--woh-danger);
    --bs-btn-border-color: rgba(180, 35, 24, 0.35);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--woh-danger);
    --bs-btn-hover-border-color: var(--woh-danger);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--woh-danger);
    --bs-btn-border-color: var(--woh-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9b1c14;
    --bs-btn-hover-border-color: #9b1c14;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--woh-success);
    --bs-btn-border-color: var(--woh-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #24573d;
    --bs-btn-hover-border-color: #24573d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #24573d;
    --bs-btn-active-border-color: #24573d;
}

.btn-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--woh-muted);
    min-height: var(--woh-control-height-sm);
    padding: 0.2rem 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.btn-quiet:hover,
.btn-quiet:focus-visible {
    background: rgba(20, 22, 26, 0.05);
    border-color: transparent;
    color: var(--woh-ink);
}

.form-control,
.form-select {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: var(--woh-control-height);
    min-height: var(--woh-control-height);
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--woh-line-strong);
    border-radius: var(--woh-radius-sm);
    color: var(--woh-ink);
    font-size: 0.875rem;
    background-color: var(--woh-white);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233f4550' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.7rem;
    padding-right: 2rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--woh-orange);
    box-shadow: var(--woh-focus-ring);
}

textarea.form-control {
    height: auto;
    min-height: 6rem;
}

.form-label {
    font-weight: 550;
    color: var(--woh-muted);
    margin-bottom: 0.45rem;
    font-size: 0.8125rem;
}

.form-text {
    color: var(--woh-faint);
    font-size: 0.75rem;
}

.rate-sanity {
    color: var(--woh-amber);
}

.form-check-input:checked {
    background-color: var(--woh-orange);
    border-color: var(--woh-orange);
}

.form-check-input:focus {
    border-color: var(--woh-orange);
    box-shadow: var(--woh-focus-ring);
}

.form-switch .form-check-input {
    width: 2.25rem;
    height: 1.2rem;
    cursor: pointer;
}

.form-switch .form-check-input:disabled {
    cursor: not-allowed;
}

.form-switch .form-check-label {
    padding-left: 0.25rem;
    cursor: pointer;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--woh-ink);
    --bs-table-border-color: #eef0f3;
    --bs-table-hover-bg: rgba(20, 22, 26, 0.03);
}

.table thead th {
    color: var(--woh-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-bottom-color: var(--woh-line);
    background: rgba(20, 22, 26, 0.028);
}

.table > :not(caption) > * > * {
    padding: 0.38rem 0.5rem;
    vertical-align: middle;
}

.table a {
    text-decoration: none;
}

.nav-pills .nav-link {
    color: var(--woh-muted);
    font-weight: 600;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--woh-ink);
    color: #fff;
}

.stat-card {
    background: var(--woh-surface);
    border: 1px solid var(--woh-border);
    border-radius: var(--woh-radius);
    box-shadow: var(--woh-shadow);
    height: 100%;
}

.stat-card .stat-label,
.metric-label {
    color: var(--woh-muted);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.stat-card .stat-value,
.metric-value {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.stat-card.attention,
.metric.is-warning {
    background: var(--woh-amber-bg);
    border-color: rgba(138, 75, 16, 0.2);
}

.metric.is-danger {
    background: var(--woh-danger-bg);
    border-color: rgba(180, 35, 24, 0.18);
}

.stat-card.attention .stat-value,
.metric.is-warning .metric-value {
    color: var(--woh-amber);
}

.metric.is-danger .metric-value {
    color: var(--woh-danger);
}

.metric.is-zero .metric-value {
    color: var(--woh-muted);
    font-weight: 650;
}

.metric.is-on-hire {
    background: var(--woh-teal-bg);
    border-color: rgba(13, 107, 92, 0.18);
}

.metric.is-on-hire .metric-value {
    color: var(--woh-teal);
}

.stat-card .stat-subvalue {
    margin-top: 0.3rem;
    font-size: 0.9rem;
}

.stat-card-link,
.metric-link {
    text-decoration: none;
    color: inherit;
    display: block;
    border-radius: var(--woh-radius);
}

.stat-card-link:focus-visible .stat-card-clickable,
.metric-link:focus-visible .metric {
    outline: 2px solid var(--woh-orange);
    outline-offset: 2px;
}

.stat-card-clickable,
.metric-link .metric {
    transition: border-color var(--woh-transition), box-shadow var(--woh-transition);
}

.stat-card-clickable:hover,
.metric-link:hover .metric {
    border-color: var(--woh-line-strong);
    box-shadow: var(--woh-shadow-hover);
}

.stat-card.attention .stat-subvalue,
.metric.is-warning .metric-subvalue {
    color: var(--woh-amber);
}

.panel {
    background: var(--woh-surface);
    border: 1px solid var(--woh-border);
    border-radius: var(--woh-radius);
    box-shadow: none;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}

.email-preview {
    background: #f3f1ec;
    border: 1px solid var(--woh-border);
}

.email-preview-to {
    font-size: 0.95rem;
}

.email-preview-to strong {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.email-preview-kicker {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--woh-muted, #6b6570);
}

.email-preview-sample {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.45rem 0.95rem;
    border-radius: 0.4rem;
    background: #e3e0d8;
    color: #6a655d;
    font-weight: 650;
    cursor: default;
    user-select: none;
}

.panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem 1rem;
    margin-bottom: 0.85rem;
}

.panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--woh-ink);
    margin: 0;
    line-height: 1.3;
}

.panel-lede {
    color: var(--woh-faint);
    font-size: 0.75rem;
    margin: 0.2rem 0 0;
}

.panel-action {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--woh-secondary);
    text-decoration: none;
}

.panel-action:hover,
.panel-action:focus-visible {
    color: var(--woh-secondary-hover);
}

.hire-extend-action {
    position: relative;
    z-index: 2;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--woh-secondary);
    text-decoration: none;
}

button.hire-extend-action {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.hire-extend-action:hover,
.hire-extend-action:focus-visible {
    color: var(--woh-secondary-hover);
}

.link-danger-quiet {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--woh-danger-muted);
    background: transparent;
    border: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}

.link-danger-quiet:hover,
.link-danger-quiet:focus-visible {
    color: var(--woh-danger);
    text-decoration: none;
}

.btn.link-danger-quiet,
button.link-danger-quiet {
    min-height: auto;
    min-width: 0;
    box-shadow: none;
}

.btn.link-danger-quiet:hover,
.btn.link-danger-quiet:focus-visible,
button.link-danger-quiet:hover,
button.link-danger-quiet:focus-visible {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.btn-quiet.link-danger-quiet {
    color: var(--woh-danger-muted);
}

.btn-quiet.link-danger-quiet:hover,
.btn-quiet.link-danger-quiet:focus-visible {
    background: transparent;
    color: var(--woh-danger);
}

.page-header-actions .link-danger-quiet {
    min-width: 0;
}

.page-header-quiet-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem 1rem;
}

.page-header-quiet-actions .panel-action,
.page-header-quiet-actions .link-danger-quiet {
    min-width: 0;
    min-height: auto;
}

.row-quiet-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    flex-shrink: 0;
}

.row-quiet-actions .btn {
    min-height: 2rem;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

.panel-table {
    margin: 0;
}

.sort-header {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.sort-icon {
    font-size: 0.7rem;
    color: var(--woh-muted);
    opacity: 0.5;
}

.sort-icon.is-active {
    opacity: 1;
    color: var(--woh-ink);
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--woh-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.page-back:hover,
.page-back:focus-visible {
    color: var(--woh-ink);
}

.page-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem 1rem;
}

.page-header-leading {
    flex: 0 0 auto;
}

.page-header-leading .type-picture-note {
    max-width: 9.5rem;
    margin: 0.35rem 0 0;
    color: var(--woh-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.page-header-row > div:not(.page-header-leading):not(.page-header-action-stack) {
    min-width: 0;
    flex: 1 1 16rem;
}

.page-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
}

.page-title {
    color: var(--woh-ink);
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    margin-bottom: 0.25rem;
    line-height: 1.15;
}

.page-title-row .page-title {
    margin-bottom: 0;
}

.page-subtitle {
    color: var(--woh-muted);
    font-size: 0.875rem;
    font-weight: 450;
    margin-bottom: 0;
    max-width: 42rem;
}

.page-header-action-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 0 auto;
    min-width: 0;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: 0;
}

.page-header-actions .btn {
    min-width: 5.5rem;
}

.page-header-actions:has(.owned-on-hire-actions) {
    align-items: center;
}

.owned-on-hire-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem 0.85rem;
}

.owned-on-hire-note {
    margin: 0;
    max-width: 26rem;
    color: var(--woh-muted);
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: right;
}

.owned-on-hire-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.95rem;
}

.move-charge-options {
    min-width: 0;
    max-width: 100%;
}

.move-charge-options .form-check {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.move-charge-options .form-check-label {
    display: block;
    min-height: 2.75rem;
    overflow-wrap: anywhere;
}

.move-charge-shift {
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.75rem;
    border-radius: var(--woh-radius);
    background: var(--woh-subtle);
    font-weight: 650;
}

.hire-card,
.review-card {
    background: var(--woh-surface);
    border: 1px solid var(--woh-border);
    border-radius: var(--woh-radius);
    box-shadow: var(--woh-shadow);
    padding: 1rem 1.1rem;
    height: 100%;
}

.review-card {
    padding: 1.25rem;
    overflow-wrap: anywhere;
}

.review-items-table {
    display: block;
}

@media (max-width: 767.98px) {
    .review-items-table {
        display: none;
    }
}

@media (min-width: 768px) {
    .review-items-cards {
        display: none;
    }
}

.money {
    font-weight: 650;
    color: var(--woh-ink);
}

.approx-note {
    color: var(--woh-muted);
    font-size: 0.85rem;
    margin-bottom: 0.85rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: 1.25;
}

.status-on-hire {
    background: var(--woh-teal-bg);
    color: var(--woh-teal);
}

.status-ready,
.status-awaiting-collection,
.status-warning {
    background: var(--woh-amber-bg);
    color: var(--woh-amber);
}

.status-requested {
    background: var(--woh-info-bg);
    color: var(--woh-info);
}

.status-off-hired {
    background: var(--woh-neutral-bg);
    color: var(--woh-muted);
}

.status-success {
    background: var(--woh-success-bg);
    color: var(--woh-success);
}

.status-neutral {
    background: var(--woh-neutral-bg);
    color: var(--woh-neutral);
}

.status-muted {
    background: transparent;
    color: var(--woh-muted);
    box-shadow: inset 0 0 0 1px var(--woh-line-strong);
}

.status-danger {
    background: var(--woh-danger-bg);
    color: var(--woh-danger);
}

.status-info {
    background: var(--woh-info-bg);
    color: var(--woh-info);
}

.metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.metric {
    background: var(--woh-surface);
    border: 1px solid var(--woh-border);
    border-radius: var(--woh-radius);
    box-shadow: 0 1px 2px rgba(20, 22, 26, 0.03);
    padding: 0.85rem 1rem;
    height: 100%;
    min-height: 5.75rem;
}

.metric-subvalue {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--woh-muted);
}

.summary-figures {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem 1.5rem;
    margin-bottom: 0.5rem;
}

.summary-figures .metric-value {
    font-size: 1.3rem;
}

.summary-note {
    color: var(--woh-muted);
    font-size: 0.85rem;
    max-width: 48rem;
    overflow-wrap: anywhere;
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.filter-strip {
    margin-bottom: 0.65rem;
    padding: 0.55rem 0.75rem 0.5rem;
    background: var(--woh-surface);
    border: 1px solid var(--woh-border);
    border-radius: var(--woh-radius);
    box-shadow: var(--woh-shadow);
}

.filter-strip .filter-bar {
    margin-bottom: 0.45rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.filter-strip .filter-chips {
    margin-bottom: 0;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--woh-subtle);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    box-shadow: none;
}

.filter-bar > div {
    flex: 0 1 12rem;
    min-width: 0;
}

.filter-bar > .list-search {
    flex: 1 1 18rem;
    max-width: none;
}

.filter-bar > .filter-bar-view {
    flex: 0 1 auto;
}

.clickable-card > .status-badge {
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
}

.clickable-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--woh-surface);
    border: 1px solid var(--woh-border);
    border-radius: var(--woh-radius);
    box-shadow: var(--woh-shadow);
    padding: 0.55rem 0.7rem;
    height: 100%;
    cursor: pointer;
    transition: border-color var(--woh-transition), box-shadow var(--woh-transition);
}

.clickable-card.is-attention {
    border-left: 4px solid var(--woh-charcoal);
}

.clickable-card:hover {
    border-color: var(--woh-line-strong);
    box-shadow: var(--woh-shadow-hover);
}

.clickable-card:has(.clickable-card-link:focus-visible) {
    outline: 2px solid var(--woh-orange);
    outline-offset: 2px;
}

.clickable-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.clickable-card-link {
    color: var(--woh-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.clickable-card-link:hover {
    color: inherit;
}

.clickable-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.clickable-card-affordance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--woh-faint);
    font-size: 0;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.clickable-card-affordance i {
    font-size: 1rem;
}

.clickable-card-meta {
    color: var(--woh-faint);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.clickable-card-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--woh-muted);
}

.clickable-card-stats-primary {
    color: var(--woh-muted);
    line-height: inherit;
}

.hire-metric-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.4rem;
    row-gap: 0.1rem;
}

.clickable-card-stats-secondary {
    color: var(--woh-faint);
    font-size: 0.75rem;
    line-height: inherit;
}

.clickable-card-status {
    margin-top: 0.15rem;
}

.clickable-card-action {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.35rem;
    width: 100%;
}

.clickable-card-action a:not(.btn) {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--woh-muted);
    text-decoration: none;
}

.clickable-card-action a:not(.btn):hover,
.clickable-card-action a:not(.btn):focus-visible {
    color: var(--woh-ink);
}

.filter-bar .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--woh-muted);
    margin-bottom: 0.2rem;
}

.filter-bar-clear {
    flex: 0 0 auto;
}

.content-section {
    margin-bottom: 1.15rem;
}

.content-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.content-section-title {
    font-size: 1.05rem;
    font-weight: 650;
    margin: 0 0 0.75rem;
}

.content-section-header .content-section-title {
    margin-bottom: 0.15rem;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem 1.25rem;
}

.details-item-wide {
    grid-column: 1 / -1;
}

.details-label {
    font-size: 0.6875rem;
    font-weight: 650;
    color: var(--woh-faint);
    margin-bottom: 0.15rem;
}

.details-value {
    margin: 0;
    overflow-wrap: anywhere;
}

.details-value.is-empty {
    color: var(--woh-muted);
}

.timeline {
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--woh-line);
    margin: 0.15rem 0 0 0.35rem;
    padding-left: 1rem;
}

.timeline-item {
    position: relative;
    padding: 0 0 0.65rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: calc(-1rem - 5px);
    top: 0.45rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--woh-muted);
}

.timeline-title {
    font-weight: 650;
}

.timeline-meta {
    font-size: 0.75rem;
    color: var(--woh-faint);
}

.timeline-note {
    margin-top: 0.3rem;
    font-size: 0.8125rem;
    color: var(--woh-muted);
    overflow-wrap: anywhere;
}

.activity-timeline-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.timeline-item.is-review .timeline-title {
    font-weight: 500;
    color: var(--woh-muted);
}

.timeline-item.is-review::before {
    width: 6px;
    height: 6px;
    left: calc(-1rem - 4px);
    background: var(--woh-line);
}

.uk-datetime-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: end;
}

@media (max-width: 575.98px) {
    .uk-datetime-field {
        grid-template-columns: 1fr;
    }
}

.site-allocation-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}

.site-allocation-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--woh-muted);
}

.site-allocation-dates {
    font-size: 0.75rem;
    color: var(--woh-faint);
    text-align: right;
}

.site-allocation-stats {
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--woh-line);
}

.site-allocation-list .site-allocation-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.record-row-meta {
    margin-top: 0.1rem;
    color: var(--woh-faint);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
}

.record-row {
    position: relative;
    cursor: pointer;
}

.record-row:hover {
    background: var(--woh-hover);
}

.record-row-link,
.yard-name {
    font-weight: 650;
    text-decoration: none;
    color: var(--woh-ink);
}

.yard-name {
    font-size: 0.875rem;
    line-height: 1.3;
}

.record-row-link:hover,
.yard-name:hover,
.clickable-card-link:hover {
    color: var(--woh-ink);
    text-decoration: none;
    font-weight: 750;
}

.record-row-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.record-row:has(.record-row-link:focus-visible) {
    outline: 2px solid var(--woh-orange);
    outline-offset: -2px;
}

.record-row .record-row-actions {
    pointer-events: none;
}

.record-row .overflow-menu,
.record-row .record-row-action-cluster,
.record-row a:not(.record-row-link),
.record-row button {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.record-row:has(.overflow-menu[open]) {
    z-index: 40;
}

.record-row:has(.overflow-menu[open]) .record-row-actions {
    z-index: 50;
}

.hires-list-page .hire-row,
.hire-card.clickable-card {
    cursor: pointer;
}

.hire-card-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hire-card .kit-avatar,
.clickable-card .kit-avatar,
.dashboard-hire-row .kit-avatar {
    position: relative;
    z-index: 2;
}

.hire-card:has(.hire-card-hit:focus-visible) {
    outline: 2px solid var(--woh-orange);
    outline-offset: 2px;
}

.hire-catalogue-link,
.hire-line-name {
    font-weight: 650;
    color: var(--woh-ink);
}

.hire-catalogue-link {
    position: relative;
    z-index: 2;
    text-decoration: none;
}

.hire-catalogue-link:hover {
    text-decoration: underline;
}

.hires-list-page .hire-catalogue-link,
.hires-list-page .hire-line-name {
    font-size: 0.875rem;
    line-height: 1.3;
}

.hire-card .hire-catalogue-link,
.hire-card .hire-line-name {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
}

a.clickable-card-affordance {
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.overflow-menu {
    position: relative;
    display: inline-block;
}

.overflow-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--woh-radius-sm);
    background: transparent;
    color: var(--woh-muted);
    cursor: pointer;
}

.overflow-menu > summary::-webkit-details-marker {
    display: none;
}

.overflow-menu > summary:hover,
.overflow-menu[open] > summary {
    background: rgba(20, 22, 26, 0.05);
    color: var(--woh-ink);
}

.page-header-actions .overflow-menu > summary {
    width: var(--woh-control-height);
    height: var(--woh-control-height);
    box-sizing: border-box;
    border: 1px solid var(--woh-secondary);
    border-radius: var(--woh-radius-sm);
    background: #fff;
    color: var(--woh-secondary);
}

.page-header-actions .overflow-menu > summary .bi {
    font-size: 18px;
    line-height: 1;
}

.page-header-actions .overflow-menu > summary:hover,
.page-header-actions .overflow-menu[open] > summary {
    background: var(--woh-secondary);
    border-color: var(--woh-secondary);
    color: #fff;
}

.overflow-menu[open] {
    z-index: 50;
}

.overflow-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.2rem);
    z-index: 60;
    min-width: 11rem;
    padding: 0.3rem;
    background: var(--woh-surface);
    border: 1px solid var(--woh-border);
    border-radius: var(--woh-radius-sm);
    box-shadow: var(--woh-shadow-float);
}

.data-panel:has(.overflow-menu[open]),
.table-responsive:has(.overflow-menu[open]) {
    overflow: visible;
}

.overflow-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    color: var(--woh-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.overflow-menu-item:hover,
.overflow-menu-item:focus-visible {
    background: rgba(20, 22, 26, 0.05);
    color: var(--woh-ink);
}

.overflow-menu-item-danger {
    color: var(--woh-danger-muted);
}

.overflow-menu-item-danger:hover,
.overflow-menu-item-danger:focus-visible {
    background: transparent;
    color: var(--woh-danger);
    text-decoration: none;
}

.app-notice {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--woh-radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.app-notice-success {
    background: var(--woh-success-bg);
    color: var(--woh-success);
}

.app-notice-warning {
    background: var(--woh-warning-bg);
    color: var(--woh-warning);
}

.app-notice-danger {
    background: var(--woh-danger-bg);
    color: var(--woh-danger);
}

.app-notice-info {
    background: var(--woh-paper);
    color: var(--woh-ink);
    border: 1px solid var(--woh-line);
}

.app-notice-body {
    min-width: 0;
}

.app-notice-dismiss {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.7;
    border-radius: 6px;
}

.app-notice-dismiss:hover,
.app-notice-dismiss:focus-visible {
    opacity: 1;
    background: rgba(20, 22, 26, 0.06);
}

.inline-prompt {
    margin: 0 0 1.15rem;
    color: var(--woh-muted);
    font-size: 0.9rem;
}

.inline-prompt a {
    font-weight: 650;
    color: var(--woh-ink);
}

.inline-prompt a:hover {
    color: var(--woh-ink);
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.settings-grid > .panel {
    margin-bottom: 0;
}

.settings-page .settings-panel.is-padded {
    padding: 1rem 1.05rem;
}

.settings-section-label {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--woh-ink);
}

.settings-section + .settings-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--woh-line);
}

.settings-section .form-label {
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}

.settings-org-name {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--woh-ink);
}

.settings-switch-list {
    display: flex;
    flex-direction: column;
}

.settings-switch-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.65rem 0;
}

.settings-switch-row + .settings-switch-row {
    border-top: 1px solid var(--woh-line);
}

.settings-switch-row:first-child {
    padding-top: 0.1rem;
}

.settings-switch-row:last-child {
    padding-bottom: 0;
}

.settings-switch-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-switch-title {
    display: block;
    margin: 0 0 0.2rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--woh-ink);
    cursor: pointer;
}

.settings-switch-copy .form-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.settings-switch-control {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    min-height: auto;
}

.settings-switch-control .form-check-input {
    margin: 0.05rem 0 0;
    float: none;
}

.settings-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--woh-line);
}

.action-section {
    margin-bottom: 1.15rem;
}

.action-section.is-active {
    background: var(--woh-surface);
    border: 1px solid var(--woh-border);
    border-radius: var(--woh-radius);
    box-shadow: 0 1px 2px rgba(20, 22, 26, 0.03);
    padding: 1rem 1.1rem;
}

.status-summary {
    margin: 0 0 0.85rem;
    color: var(--woh-muted);
    font-size: 0.9rem;
}

.reminder-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 1.15rem;
}

.action-section.is-quiet {
    padding: 0;
    margin: 0 0 0.85rem;
    color: var(--woh-muted);
    font-size: 0.9rem;
}

.reminder-disabled {
    opacity: 0.62;
}

.role-owner {
    background: #eef2f4;
    color: #3d4450;
}

.role-admin {
    background: #eef4fb;
    color: #35557a;
}

.role-member {
    background: #e8f3ec;
    color: #2f6f4e;
}

#site-contacts {
    scroll-margin-top: 1.25rem;
}

.role-guide-accordion > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--woh-muted);
    font-size: 0.875rem;
    font-weight: 600;
    user-select: none;
}

.role-guide-accordion > summary::-webkit-details-marker {
    display: none;
}

.role-guide-accordion > summary:hover {
    color: var(--woh-orange);
}

.role-guide-chevron {
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.role-guide-accordion[open] .role-guide-chevron {
    transform: rotate(180deg);
}

.role-guide {
    background: var(--woh-paper);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius-sm);
    padding: 0.9rem 1rem;
}

.role-guide ul {
    margin-bottom: 0;
    padding-left: 1.1rem;
}

.role-guide li + li {
    margin-top: 0.25rem;
}

.btn-ready {
    background: var(--woh-orange);
    border-color: var(--woh-orange);
    color: #fff;
}

.btn-ready:hover {
    background: var(--woh-orange-hover);
    border-color: var(--woh-orange-hover);
    color: #fff;
}

.btn-needed {
    background: var(--ph-green);
    border-color: var(--ph-green);
    color: #fff;
}

.btn-needed:hover {
    background: #24573d;
    border-color: #24573d;
    color: #fff;
}

.review-action {
    min-height: 3.2rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.review-action.selected {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
}

.review-prompt {
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.review-progress {
    font-weight: 600;
    color: var(--woh-ink);
}

.review-complete {
    background: #e8f3ec;
    color: #2f6f4e;
    border-radius: var(--woh-radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}

.review-complete h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.review-complete-public {
    margin-top: 1rem;
    padding: 1.5rem 1.25rem;
}

.review-complete-public .review-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.status-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.hire-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--woh-ink);
}

.hire-state-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--woh-faint);
}

.hire-state-on-hire {
    color: var(--woh-muted);
    font-weight: 500;
}

.hire-state-on-hire .hire-state-dot,
.status-dot.hire-state-on-hire {
    background: var(--woh-teal);
}

.hire-state-ready .hire-state-dot,
.status-dot.hire-state-ready {
    background: var(--woh-amber);
}

.hire-state-overdue .hire-state-dot,
.status-dot.hire-state-overdue {
    background: var(--woh-amber);
}

.hire-state-collection .hire-state-dot,
.status-dot.hire-state-collection {
    background: var(--woh-faint);
}

.hire-state-confirmation .hire-state-dot,
.status-dot.hire-state-confirmation {
    background: var(--woh-info);
}

.hire-state-review .hire-state-dot,
.status-dot.hire-state-review {
    background: var(--woh-amber);
}

.hire-state-detail,
.hire-days-expected,
.hire-cost-caption,
.dashboard-hire-row-detail {
    color: var(--woh-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
}

.hire-state-detail {
    margin-top: 0.15rem;
}

.hire-days-expected.is-past {
    color: var(--woh-amber);
}

.hire-days-primary {
    color: var(--woh-ink);
    font-weight: 600;
}

.hire-cost-caption {
    font-weight: 500;
}

.attention-badge {
    display: inline-flex;
    align-items: center;
    background: var(--woh-danger-bg);
    color: var(--woh-danger);
    border: 1px solid rgba(180, 35, 24, 0.18);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.15rem 0.55rem;
    white-space: nowrap;
}

.attention-alert {
    border-left: 4px solid #ffc107;
    background: #fffbf0;
}

.attention-alert-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.attention-alert-note {
    font-size: 1rem;
    font-weight: 500;
}

.attention-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.attention-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.attention-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ph-border, #e8e4dc);
}

.attention-list-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.attention-list-item-main {
    flex: 1 1 16rem;
    min-width: 0;
}

.attention-list-item-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.attention-list-item-title {
    font-weight: 700;
    text-decoration: none;
}

.attention-list-item-note {
    font-weight: 500;
    margin-top: 0.35rem;
}

.attention-list-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

.attention-hire-preview,
.hire-card-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    width: auto;
}

.attention-table-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.review-complete-summary,
.review-complete-notsure {
    text-align: left;
}

.review-complete-notsure-item {
    padding: 0.75rem;
    background: #fffbf0;
    border: 1px solid #ffeeba;
    border-radius: 0.5rem;
}

.review-answer {
    font-weight: 700;
    text-align: center;
    border-radius: 0.55rem;
    padding: 0.85rem 1rem;
}

.review-answer.needed {
    background: #e8f3ec;
    color: #2f6f4e;
}

.review-answer.offhire {
    background: var(--woh-orange-soft);
    color: var(--woh-orange);
}

.review-item-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.review-site-heading {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.15rem 0 0.65rem;
}

.public-shell .page-title {
    font-size: 1.25rem;
}

.public-shell .container-md {
    max-width: 62rem;
}

.public-review-container {
    max-width: 62rem;
    margin: 0 auto;
}

.supplier-details p:last-child {
    margin-bottom: 0;
}

.response-segments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.response-segments button {
    border: 1px solid var(--woh-line, #d7dbe0);
    background: #fff;
    color: inherit;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-weight: 650;
}

.response-segments button.is-selected {
    background: #1f6b4a;
    border-color: #1f6b4a;
    color: #fff;
}

.supplier-line.is-changed {
    border-color: #c2410c;
    box-shadow: inset 3px 0 0 #c2410c;
}

.response-summary {
    font-weight: 650;
}

.supplier-summary-card {
    margin-bottom: 0;
}

.supplier-summary-list {
    margin: 0.75rem 0 0;
    padding-left: 1.15rem;
}

.supplier-referral {
    margin: 1.25rem 0 0;
}

.supplier-referral a {
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.hire-review-workspace-public {
    padding-bottom: 5rem;
}

.review-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.review-org-name {
    color: var(--woh-muted);
}

.review-scope-summary {
    font-weight: 600;
}

.review-progress-track {
    height: 0.45rem;
    background: #ece8e0;
    border-radius: 999px;
    overflow: hidden;
}

.review-progress-fill {
    height: 100%;
    background: var(--woh-orange);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.review-item-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-item-card {
    background: var(--woh-white);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    padding: 1.15rem 1.25rem;
    overflow-wrap: anywhere;
}

.review-item-inactive {
    background: #fafafa;
}

.review-item-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.review-item-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.65rem 1rem;
    margin: 0 0 0.85rem;
}

.review-item-meta div {
    margin: 0;
}

.review-item-meta dt {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--woh-muted);
    margin-bottom: 0.1rem;
}

.review-item-meta dd {
    margin: 0;
    font-weight: 600;
}

.review-context-outstanding {
    color: #7a5a12;
}

.review-question {
    font-weight: 650;
    margin-bottom: 0.75rem;
}

.review-decisions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.review-decision {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.85rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius-sm);
    background: var(--woh-white);
    color: var(--woh-ink);
    font-weight: 650;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.review-decision:focus-visible {
    outline: 2px solid var(--woh-orange);
    outline-offset: 2px;
}

.review-decision-check {
    font-weight: 700;
}

.review-decision-needed.selected {
    background: #e8f3ec;
    border-color: #2f6f4e;
    color: #2f6f4e;
}

.review-decision-ready.selected {
    background: var(--woh-orange-soft);
    border-color: var(--woh-orange);
    color: var(--woh-orange);
}

.review-decision-unsure.selected {
    background: #fff6e6;
    border-color: #b8860b;
    color: #7a5a12;
}

.review-final-answer {
    display: inline-block;
    border-radius: var(--woh-radius-sm);
    padding: 0.55rem 0.85rem;
    font-weight: 700;
}

.review-final-answer-needed {
    background: #e8f3ec;
    color: #2f6f4e;
}

.review-final-answer-ready {
    background: var(--woh-orange-soft);
    color: var(--woh-orange);
}

.review-final-answer-unsure {
    background: #fff6e6;
    color: #7a5a12;
}

.review-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--woh-line);
}

.review-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.review-complete-btn,
.review-mark-remaining-btn {
    width: 100%;
}

.review-setup-panel {
    max-width: 36rem;
    margin: 0;
}

.setup-choice-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.setup-choice,
.setup-site-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.9rem 1rem;
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius-sm);
    background: var(--woh-white);
    color: var(--woh-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.setup-choice:hover,
.setup-site-choice:hover {
    border-color: rgba(232, 78, 22, 0.35);
}

.setup-choice:focus-visible,
.setup-site-choice:focus-visible,
.setup-delivery-tab:focus-visible {
    outline: 2px solid var(--woh-orange);
    outline-offset: 2px;
}

.setup-choice.selected,
.setup-site-choice.selected {
    border-color: var(--woh-orange);
    box-shadow: inset 0 0 0 1px rgba(232, 78, 22, 0.12);
    background: rgba(232, 78, 22, 0.03);
}

.setup-choice-indicator {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--woh-line);
    border-radius: 999px;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.setup-choice.selected .setup-choice-indicator {
    border-color: var(--woh-orange);
    box-shadow: inset 0 0 0 3px var(--woh-white), inset 0 0 0 6px var(--woh-orange);
}

.setup-choice-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.setup-choice-title {
    font-weight: 700;
}

.setup-choice-detail {
    font-size: 0.88rem;
    color: var(--woh-muted);
}

.setup-site-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: 14rem;
    overflow-y: auto;
}

.setup-delivery-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.setup-delivery-tab {
    border: 1px solid var(--woh-line);
    background: var(--woh-white);
    color: var(--woh-ink);
    border-radius: var(--woh-radius-sm);
    padding: 0.55rem 0.9rem;
    font-weight: 650;
    cursor: pointer;
}

.setup-delivery-tab.selected {
    border-color: var(--woh-orange);
    color: var(--woh-orange);
    background: rgba(232, 78, 22, 0.04);
}

.setup-back-link {
    color: var(--woh-muted);
    text-decoration: none;
}

.setup-back-link:hover {
    color: var(--woh-ink);
}

@media (min-width: 768px) {
    .review-decisions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .review-footer-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .review-complete-btn,
    .review-mark-remaining-btn {
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .hire-review-workspace-public .review-footer {
        position: sticky;
        bottom: 0;
        background: var(--woh-paper);
        padding-bottom: 0.75rem;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        box-shadow: 0 -8px 16px rgba(20, 22, 26, 0.06);
    }
}

.table-desktop {
    display: none;
}

.empty-state {
    color: var(--woh-muted);
    padding: 0.35rem 0;
    margin: 0;
}

.empty-state a {
    color: var(--woh-secondary);
}

.empty-state a:hover,
.empty-state a:focus-visible {
    color: var(--woh-secondary-hover);
}

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-split-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    background: #0e1013;
    color: #fff;
    padding: 1.5rem 1.75rem 2rem;
}

.auth-split-brand-top .brand-wordmark {
    height: 1.55rem;
}

.auth-split-proof {
    max-width: 22rem;
}

.auth-split-tagline {
    margin: 0 0 1.15rem;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.03em;
}

.auth-split-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9375rem;
}

.auth-split-points strong {
    color: #fff;
    font-weight: 650;
}

.auth-split-form {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--woh-cream);
    padding: 2rem 1.5rem;
}

.auth-split-form-inner {
    width: 100%;
    max-width: 24rem;
}

.auth-split-form .page-title {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 0.45rem;
    line-height: 1.2;
}

.auth-lead {
    color: var(--woh-muted);
    margin-bottom: 1.15rem;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.auth-split-form .form-label {
    font-size: 0.8125rem;
    font-weight: 650;
    margin-bottom: 0.35rem;
}

.auth-split-form .form-control {
    background: var(--woh-white);
    border-color: rgba(20, 22, 26, 0.14);
    border-radius: 8px;
    min-height: 2.65rem;
}

.auth-split-form .btn-primary {
    min-height: 2.75rem;
    font-size: 1rem;
    font-weight: 650;
    border-radius: 10px;
}

.auth-wrap {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 2.5rem;
}

.auth-card {
    width: 100%;
    max-width: 30rem;
    background: var(--woh-white);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    box-shadow: var(--woh-shadow);
    padding: 1.7rem 1.5rem;
}

.auth-card .page-title {
    font-size: 1.55rem;
}

.auth-demo {
    background: var(--woh-cream);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius-sm);
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.15rem;
    color: var(--woh-muted);
    font-size: 0.9rem;
}

.auth-demo .auth-demo-label {
    font-weight: 600;
    color: var(--woh-ink);
    margin-bottom: 0.2rem;
}

.auth-demo p {
    margin-bottom: 0;
    word-break: break-all;
}

.auth-links {
    margin-top: 1.15rem;
    text-align: center;
    color: var(--woh-muted);
    font-size: 0.9375rem;
}

.auth-links p {
    margin-bottom: 0.4rem;
}

.auth-links a {
    font-weight: 650;
}

.alert {
    border: 0;
    border-radius: var(--woh-radius-sm);
    padding: 0.7rem 0.9rem;
}

.alert-success {
    background: var(--woh-success-bg);
    color: var(--woh-success);
}

.alert-danger {
    background: var(--woh-danger-bg);
    color: var(--woh-danger);
}

.alert-warning {
    background: var(--woh-warning-bg);
    color: var(--woh-warning);
}

.alert-info {
    background: var(--woh-info-bg);
    color: var(--woh-info);
}

.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 22, 26, 0.48);
}

.app-modal {
    width: 100%;
    max-width: 32rem;
    max-height: min(92vh, 44rem);
    overflow: auto;
    background: var(--woh-white);
    border-radius: var(--woh-radius);
    box-shadow: var(--woh-shadow-float);
    padding: 1.25rem 1.2rem 1.4rem;
    min-width: 0;
}

.app-modal .form-control,
.app-modal .form-select,
.app-modal .btn {
    max-width: 100%;
}

.app-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.app-modal-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.app-modal-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: -0.2rem -0.3rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--woh-faint);
    cursor: pointer;
}

.app-modal-close:hover,
.app-modal-close:focus-visible {
    color: var(--woh-muted);
    background: rgba(20, 22, 26, 0.05);
}

.app-modal-lead {
    color: var(--woh-muted);
    margin-bottom: 1rem;
}

.offhire-choice {
    border: 1px solid var(--woh-line-strong);
    border-radius: var(--woh-radius);
    padding: 1rem 1.05rem;
    background: var(--woh-paper);
}

.offhire-choice + .offhire-choice {
    margin-top: 0.85rem;
}

.offhire-choice-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.offhire-secondary {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--woh-line);
}

.offhire-secondary-title {
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--woh-muted);
    margin-bottom: 0.2rem;
}

.offhire-status-panel {
    border-left: 4px solid var(--woh-orange);
}

.offhire-cost-warning {
    background: var(--woh-amber-bg);
    color: var(--woh-amber);
    border-radius: var(--woh-radius-sm);
    padding: 0.7rem 0.85rem;
    font-weight: 600;
}

@media (min-width: 576px) {
    .app-modal-backdrop {
        padding: 1.5rem;
    }

    .summary-figures {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reminder-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .nav-toggle {
        display: none;
    }

    .app-nav {
        display: flex;
        width: auto;
        flex-direction: row;
        align-items: center;
        flex: 1 1 auto;
        order: 2;
        gap: 0.15rem;
        min-width: 0;
    }

    .account-menu {
        order: 3;
        margin-left: auto;
        flex-shrink: 0;
    }

    .cards-mobile {
        display: none;
    }

    .table-desktop {
        display: table;
    }

    .table-responsive.table-desktop,
    .panel.table-desktop,
    .data-panel.table-desktop {
        display: block;
    }

    .details-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reminder-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-grid > .reminder-summary-slot {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .panel.has-mobile-cards {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .app-header-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 1rem;
        row-gap: 0.35rem;
    }

    .brand {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        min-width: 0;
    }

    .nav-toggle {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
        order: unset;
        justify-self: end;
    }

    .app-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        order: unset;
    }

    .nav-toggle-check:checked ~ .app-nav {
        padding: 0.25rem 0 0.5rem;
    }

    .app-nav .nav-link {
        width: 100%;
        min-height: 2.75rem;
        height: auto;
        position: relative;
        overflow: visible;
        padding: 0.7rem 0.75rem 0.9rem;
    }

    .app-nav .nav-link.active {
        box-shadow: none;
        border-radius: 8px;
    }

    .app-nav .nav-link.active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0.28rem;
        transform: translateX(-50%);
        width: 3.375rem;
        height: 3px;
        border-radius: 999px;
        background: var(--woh-orange);
        pointer-events: none;
    }

    .app-nav .account-menu {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        order: unset;
        width: 100%;
        margin: 0.55rem 0 0;
        padding-top: 0.65rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .app-nav .account-menu > summary {
        width: 100%;
        max-width: 100%;
        min-height: 2.75rem;
        height: auto;
        justify-content: center;
        padding: 0.7rem 0.75rem;
        border: 0;
        border-radius: 8px;
        background: transparent;
        box-sizing: border-box;
    }

    .app-nav .account-menu > summary:hover,
    .app-nav .account-menu[open] > summary {
        background: rgba(255, 255, 255, 0.08);
    }

    .app-nav .account-menu > summary .bi-chevron-down {
        transition: transform var(--woh-transition);
    }

    .app-nav .account-menu[open] > summary .bi-chevron-down {
        transform: rotate(180deg);
    }

    .app-nav .account-name {
        display: inline;
        max-width: min(16rem, 60vw);
    }

    .app-nav .account-menu-panel {
        position: static;
        right: auto;
        width: 100%;
        min-width: 0;
        margin-top: 0.15rem;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    .app-nav .account-menu-panel form {
        display: contents;
    }

    .app-nav .account-menu-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.7rem 0.75rem;
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.9375rem;
        font-weight: 600;
        text-align: center;
    }

    .app-nav .account-menu-item:hover,
    .app-nav .account-menu-item:focus-visible {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }
}

@media (min-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.page-lead {
    color: var(--woh-muted);
    max-width: 42rem;
}

.reminder-pause-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    background: var(--woh-surface);
    border: 1px solid var(--woh-border);
    border-radius: var(--woh-radius);
    padding: 0.95rem 1.1rem;
}

.reminder-pause-banner.is-paused {
    border-color: #c9852a;
    background: #fff7ec;
}

.reminder-card h2 {
    letter-spacing: -0.02em;
}

.reminder-advanced {
    margin-bottom: 1rem;
}

.reminder-advanced > summary {
    list-style: none;
    cursor: pointer;
    color: var(--woh-muted);
    font-size: 0.875rem;
    font-weight: 600;
    user-select: none;
}

.reminder-advanced > summary::-webkit-details-marker {
    display: none;
}

.reminder-advanced > summary:hover {
    color: var(--woh-orange);
}

.reminder-advanced[open] > summary {
    margin-bottom: 0.75rem;
}

.reminder-meta {
    margin: 1.25rem 0 1rem;
}

.reminder-meta > div {
    margin-bottom: 0.75rem;
}

.reminder-meta dt {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--woh-muted);
}

.reminder-meta dd {
    margin: 0.15rem 0 0;
}

.recipient-group-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.recipient-check {
    margin-bottom: 0.75rem;
}

.recipient-check .form-check-label {
    display: flex;
    flex-direction: column;
}

.recipient-name {
    font-weight: 600;
}

.recipient-email {
    color: var(--woh-muted);
    font-size: 0.9rem;
}

.review-reminder-context {
    color: var(--woh-muted);
    font-size: 0.95rem;
}

.reminder-setup-card {
    border-color: var(--woh-line);
    background: var(--woh-surface);
}

.reminder-coverage-table td {
    vertical-align: top;
}

.hire-attachment-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.hire-attachment-card {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    background: var(--woh-surface);
}

.hire-attachment-icon,
.hire-attachment-preview {
    flex: 0 0 4.75rem;
    width: 4.75rem;
    height: 4.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--woh-radius-sm);
    background: #fff;
    color: var(--woh-ink);
    font-size: 1.6rem;
    overflow: hidden;
    border: 1px solid var(--woh-line);
}

.hire-attachment-preview {
    padding: 0.2rem;
}

.hire-attachment-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

button.hire-attachment-preview {
    padding: 0.2rem;
    cursor: pointer;
}

@media (min-width: 768px) {
    .hire-attachment-icon,
    .hire-attachment-preview {
        flex-basis: 6rem;
        width: 6rem;
        height: 6rem;
    }
}

.hire-attachment-body {
    min-width: 0;
    flex: 1;
}

.hire-attachment-type {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--woh-muted);
}

.hire-attachment-name {
    font-weight: 650;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.hire-attachment-name:hover {
    color: var(--woh-orange);
}

.hire-attachment-icon-link {
    text-decoration: none;
    color: inherit;
}

.hire-attachment-icon-link:hover,
.hire-attachment-icon-link:focus-visible {
    color: inherit;
}

.hire-attachment-description {
    margin-top: 0.15rem;
}

.hire-attachment-meta {
    color: var(--woh-muted);
    font-size: 0.86rem;
    margin-top: 0.2rem;
}

.hire-attachment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.hire-attachment-preview,
.hire-attachment-icon-link {
    position: relative;
    z-index: 1;
}

.hire-attachment-selected {
    margin: 0;
    padding-left: 1.1rem;
}

.uk-date-field {
    position: relative;
    --uk-date-picker-width: 2.75rem;
}

.uk-date-field > .form-control {
    padding-right: var(--uk-date-picker-width);
}

.uk-date-field-picker {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--uk-date-picker-width);
    min-width: var(--uk-date-picker-width);
    height: 100%;
    min-height: var(--uk-date-picker-width);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    touch-action: manipulation;
}

.uk-date-field-picker::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}

.uk-date-field-picker::-moz-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}

.uk-date-field::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--uk-date-picker-width);
    height: 100%;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%233f4550' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E") center / 1.125rem 1.125rem no-repeat;
}

.searchable-select {
    position: relative;
}

.searchable-select .form-control[readonly] {
    background-color: #fff;
    opacity: 1;
    cursor: text;
}

.searchable-select-list {
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    top: calc(100% - 0.15rem);
    max-height: 16rem;
    overflow: auto;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: var(--woh-white);
    border: 1px solid var(--woh-line-strong);
    border-radius: var(--woh-radius-sm);
    box-shadow: var(--woh-shadow);
}

.searchable-select-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    color: inherit;
}

.searchable-select-option:hover,
.searchable-select-option.selected {
    background: rgba(20, 22, 26, 0.05);
}

.searchable-select-empty {
    padding: 0.5rem 0.6rem;
    color: var(--woh-muted);
    font-size: 0.9rem;
}

.wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--woh-muted);
    font-weight: 600;
}

.wizard-step-index {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--woh-neutral-bg);
    font-size: 0.8rem;
}

.wizard-step.is-current {
    color: var(--woh-ink);
}

.wizard-step.is-current .wizard-step-index {
    background: var(--woh-orange);
    color: #fff;
}

.wizard-step.is-complete .wizard-step-index {
    background: var(--woh-success);
    color: #fff;
}

.app-notice-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    max-width: 24rem;
    margin-bottom: 0;
    box-shadow: var(--woh-shadow);
}

.setup-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    background: var(--woh-white);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    box-shadow: var(--woh-shadow);
}

.setup-card p {
    margin: 0.2rem 0 0;
    color: var(--woh-muted);
}

.filter-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    -webkit-overflow-scrolling: touch;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 2rem;
    border: 1px solid var(--woh-line);
    background: var(--woh-white);
    color: var(--woh-muted);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8125rem;
    font-weight: 550;
}

.filter-chip.is-active {
    background: var(--woh-ink);
    border-color: var(--woh-ink);
    color: #fff;
}

.list-search {
    max-width: none;
}

.form-narrow {
    width: 100%;
    max-width: 42rem;
    margin: 0;
}

.kind-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius-sm);
    background: var(--woh-subtle);
}

.kind-toggle-option {
    min-height: 2.375rem;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: calc(var(--woh-radius-sm) - 2px);
    background: transparent;
    color: var(--woh-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.kind-toggle-option.is-selected {
    background: var(--woh-white);
    color: var(--woh-ink);
    box-shadow: 0 1px 2px rgba(17, 19, 24, 0.08);
}

.kind-toggle-option:focus-visible {
    outline: 2px solid var(--woh-orange);
    outline-offset: 2px;
}

.kind-toggle-option:disabled {
    cursor: not-allowed;
}

.kind-toggle[aria-disabled="true"] .kind-toggle-option:not(.is-selected) {
    opacity: 0.55;
}

.hire-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "fields"
        "estimate"
        "actions";
    gap: 1rem;
    align-items: start;
}

.hire-form-fields {
    grid-area: fields;
}

.hire-form-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.live-cost-panel {
    grid-area: estimate;
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    background: var(--woh-paper);
    padding: 1rem 1.05rem;
}

.review-confirm-summary {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.review-confirm-summary > div {
    display: grid;
    gap: 0.15rem;
}

.review-confirm-summary dt {
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--woh-muted);
}

.review-confirm-summary dd {
    margin: 0;
    font-weight: 600;
}

.reminder-save-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1.15rem;
    padding: 0.85rem 1rem;
    background: var(--woh-white);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
}

.password-rules {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    color: var(--woh-muted);
    font-size: 0.86rem;
}

.password-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.password-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(20, 22, 26, 0.06);
    color: var(--woh-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.auth-legal {
    margin-top: 0.85rem;
    font-size: 0.86rem;
    color: var(--woh-muted);
}

.auth-support {
    margin-top: 1.15rem;
    font-size: 0.86rem;
    color: var(--woh-muted);
    line-height: 1.45;
}

.auth-support a {
    color: inherit;
    font-weight: 650;
}

.auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .auth-split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .auth-split-brand {
        gap: 0;
        padding: 1rem 1.25rem;
    }

    .auth-split-proof {
        display: none;
    }

    .auth-split-form {
        align-items: flex-start;
        padding: 1.5rem 1.25rem 2rem;
    }
}

.manage-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.manage-nav .nav-link {
    color: var(--woh-ink);
    font-weight: 600;
    border-radius: 8px;
}

.manage-nav .nav-link.active {
    background: var(--woh-ink);
    color: #fff;
}

.metric-icon {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 0.45rem;
    background: rgba(20, 22, 26, 0.06);
    color: var(--woh-muted);
}

.metric.is-on-hire .metric-icon {
    background: rgba(13, 107, 92, 0.12);
    color: var(--woh-teal);
}

.metric.is-warning .metric-icon {
    background: rgba(138, 75, 16, 0.12);
    color: var(--woh-amber);
}

.metric.is-danger .metric-icon {
    background: rgba(180, 35, 24, 0.12);
    color: var(--woh-danger);
}

@media (min-width: 992px) {
    .hire-form-layout {
        grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.8fr);
        grid-template-areas:
            "fields estimate"
            "actions estimate";
    }

    .live-cost-panel {
        position: sticky;
        top: 1rem;
    }

    .manage-shell {
        grid-template-columns: 14rem minmax(0, 1fr);
    }
}

@media (max-width: 1199.98px) {
    .metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .metric-strip {
        grid-template-columns: 1fr;
    }

    .app-notice-toast {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

.btn-dashboard-secondary {
    --bs-btn-color: var(--woh-ink);
    --bs-btn-bg: var(--woh-white);
    --bs-btn-border-color: rgba(20, 22, 26, 0.18);
    --bs-btn-hover-color: var(--woh-ink);
    --bs-btn-hover-bg: #f8f8f8;
    --bs-btn-hover-border-color: rgba(20, 22, 26, 0.24);
    --bs-btn-active-color: var(--woh-ink);
    --bs-btn-active-bg: #f2f2f2;
    --bs-btn-active-border-color: rgba(20, 22, 26, 0.24);
}

.dashboard-page-header .page-header-row {
    flex-direction: column;
    align-items: stretch;
}

.dashboard-page-header .page-header-row > :first-child {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.dashboard-page-header .page-subtitle {
    order: -1;
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    color: var(--woh-muted);
    margin-bottom: 0.35rem;
}

.dashboard-page-header .page-title {
    font-size: 1.5rem;
    margin-bottom: 0;
}

.dashboard-page-header .page-header-actions {
    width: 100%;
}

.dashboard-page-header .page-header-actions .btn {
    flex: 1 1 0;
    min-height: 2.75rem;
}

.dashboard-sheet {
    background: var(--woh-white);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    box-shadow: none;
    padding: 0;
    margin-bottom: 1rem;
    overflow: hidden;
}

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--woh-line);
}

.dashboard-kpis.has-coming,
.dashboard-kpis.has-extra {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.dashboard-kpi-note {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--woh-ink-soft, #5c6570);
    white-space: normal;
    overflow-wrap: anywhere;
}

.dashboard-kpi {
    padding: 1.15rem 1rem 1.25rem;
    text-align: left;
}

.dashboard-kpi:not(:last-child) {
    border-right: 1px solid var(--woh-line);
}

.dashboard-kpi-link {
    color: inherit;
    text-decoration: none;
}

.dashboard-kpi-link:hover,
.dashboard-kpi-link:focus-visible {
    color: inherit;
    background: rgba(20, 22, 26, 0.02);
}

button.dashboard-kpi {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

button.dashboard-kpi.is-selected {
    background: rgba(232, 78, 22, 0.08);
    box-shadow: inset 0 -3px 0 var(--woh-orange);
}

.home-board-filters .dashboard-kpis.is-board-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-board-filters .dashboard-kpis.is-board-filters.has-extra {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.dashboard-kpi-label {
    font-size: 0.8125rem;
    color: var(--woh-muted);
    margin-bottom: 0.35rem;
}

.dashboard-kpi-value {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.dashboard-kpi-value.is-on-hire {
    color: var(--woh-teal);
}

.dashboard-kpi-value.is-warning {
    color: var(--woh-amber);
}

.dashboard-kpi-value.is-danger {
    color: var(--woh-danger);
}

button.dashboard-kpi.is-attention,
button.dashboard-kpi.is-attention.is-selected {
    background: var(--woh-danger-bg);
    color: var(--woh-danger);
    box-shadow: inset 0 -2px 0 var(--woh-danger);
}

button.dashboard-kpi.is-attention .dashboard-kpi-label,
button.dashboard-kpi.is-attention .dashboard-kpi-value,
button.dashboard-kpi.is-attention .dashboard-kpi-note {
    color: var(--woh-danger);
}

button.dashboard-kpi.is-attention:hover,
button.dashboard-kpi.is-attention:focus-visible {
    background: var(--woh-danger-bg);
    color: var(--woh-danger);
}

button.dashboard-kpi:focus:not(:focus-visible) {
    outline: none;
}

.dashboard-kpi-note {
    display: block;
    max-width: 100%;
    margin-top: 0.12rem;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-up-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--woh-line);
    font-size: 0.875rem;
}

.dashboard-up-next-text {
    margin: 0;
    color: var(--woh-muted);
}

.dashboard-up-next-text strong {
    color: var(--woh-ink);
    font-weight: 650;
    margin-right: 0.35rem;
}

.dashboard-hire-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
}

.dashboard-hire-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 200px;
    align-items: center;
    gap: 0.65rem 1rem;
    padding: 0.85rem 1rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--woh-line);
    border-radius: 0;
    box-shadow: none;
    color: inherit;
}

.dashboard-hire-row-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    color: inherit;
    text-decoration: none;
}

.dashboard-hire-row-link:hover,
.dashboard-hire-row-link:focus-visible {
    color: inherit;
}

.dashboard-hire-row:hover,
.dashboard-hire-row:focus-within {
    background: var(--woh-hover);
    box-shadow: none;
}

.dashboard-hire-row:has(.dashboard-hire-row-link:focus-visible) {
    outline: 2px solid var(--woh-orange);
    outline-offset: -2px;
}

.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--woh-faint);
}

.status-dot.stage-on-hire {
    background: var(--woh-teal);
}

.status-dot.stage-ready {
    background: var(--woh-amber);
}

.status-dot.stage-awaiting-confirmation {
    background: var(--woh-info);
}

.status-dot.stage-awaiting-collection {
    background: var(--woh-faint);
}

.dashboard-hire-row-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.dashboard-hire-row-copy {
    min-width: 0;
}

.dashboard-hire-row-footer {
    display: contents;
}

.dashboard-hire-row-footer .alert {
    grid-column: 1 / -1;
}

.dashboard-hire-row-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin-bottom: 0.2rem;
}

.dashboard-hire-row-name {
    font-weight: 600;
    color: var(--woh-ink);
    font-size: 0.875rem;
    line-height: 1.3;
}

.dashboard-hire-row-state {
    color: var(--woh-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
}

.dashboard-hire-row-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-height: 1.85rem;
}

.dashboard-hire-row-heading .status-badge {
    flex-shrink: 0;
    white-space: nowrap;
}

.dashboard-hire-row-cost-sep,
.dashboard-hire-row-cost-prefix {
    display: none;
}

.dashboard-hire-row-extend {
    position: relative;
    z-index: 2;
}

.dashboard-hire-row-meta {
    color: var(--woh-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dashboard-hire-row-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex-shrink: 0;
    text-align: right;
}

.dashboard-hire-row-days {
    color: var(--woh-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.dashboard-hire-row-cost {
    font-size: 0.98rem;
    white-space: nowrap;
}

.dashboard-empty {
    padding: 1.5rem 1rem;
}

.dashboard-approx-note {
    margin: -0.35rem 0 1rem;
}

@media (min-width: 768px) {
    .dashboard-page-header .page-header-row {
        flex-direction: row;
        align-items: flex-end;
    }

    .dashboard-page-header .page-header-row > :first-child {
        flex: 1 1 16rem;
    }

    .dashboard-page-header .page-header-actions {
        width: auto;
    }

    .dashboard-page-header .page-header-actions .btn {
        flex: 0 0 auto;
        min-height: var(--woh-control-height);
    }
}

@media (max-width: 1100px) {
    .dashboard-kpis.has-coming,
    .dashboard-kpis.has-extra {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .dashboard-kpis,
    .dashboard-kpis.has-coming,
    .dashboard-kpis.has-extra {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-kpi:nth-child(2) {
        border-right: 0;
    }

    .dashboard-kpi:nth-child(1),
    .dashboard-kpi:nth-child(2) {
        border-bottom: 1px solid var(--woh-line);
    }

    .dashboard-up-next {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-hire-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        grid-template-columns: none;
        gap: 0.35rem;
    }

    .dashboard-hire-row-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
        width: 100%;
        position: relative;
        z-index: 2;
    }

    .dashboard-hire-row-stats {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.1rem 0.4rem;
        text-align: left;
    }

    .dashboard-hire-row-cost-sep,
    .dashboard-hire-row-cost-prefix {
        display: inline;
    }

    .dashboard-hire-row-stats .hire-cost-caption {
        display: none;
    }

    .dashboard-hire-row-cost {
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .dashboard-hire-row-actions {
        flex-wrap: nowrap;
        margin-left: auto;
    }

    .btn-row-action {
        --woh-btn-height: 2.5rem;
        height: auto;
        min-height: 2.5rem;
        padding: 0 0.75rem;
        width: auto;
        max-width: none;
    }

    .hire-extend-action {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
    }
}

/* Design pass: app shell, density helpers, role home */

.app-shell.has-app-nav {
    display: grid;
    grid-template-columns: var(--woh-sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--woh-topbar-height) minmax(0, 1fr);
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) {
    grid-template-columns: var(--woh-sidebar-collapsed) minmax(0, 1fr);
}

.app-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    background: var(--woh-hero);
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.app-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    min-height: var(--woh-topbar-height);
    padding: 0 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-sidebar-top .brand-wordmark {
    height: 1.35rem;
}

.sidebar-collapse {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: calc(100% - 1.1rem);
    min-height: 2rem;
    flex-shrink: 0;
    margin: 0.35rem 0.55rem 0.65rem;
    padding: 0.3rem 0.65rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.sidebar-collapse:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-collapse i {
    width: 1.1rem;
    font-size: 1rem;
    text-align: center;
}

.app-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.75rem 0.55rem 0.5rem;
    overflow-y: auto;
}

.sidebar-collapse {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    background: var(--woh-hero);
}

@media (max-height: 760px) {
    .app-sidebar-nav {
        gap: 0.2rem;
        padding-top: 0.35rem;
        padding-bottom: 0.25rem;
    }

    .app-sidebar-nav .nav-group-label {
        padding-bottom: 0;
    }

    .app-sidebar-nav .nav-link {
        min-height: 1.6rem;
        padding-top: 0.12rem;
        padding-bottom: 0.12rem;
    }

    .sidebar-collapse {
        min-height: 1.7rem;
        margin-top: 0;
        margin-bottom: 0.25rem;
    }
}

.app-sidebar-nav .nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.app-sidebar-nav .nav-group-label {
    padding: 0 0.65rem 0.25rem;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2rem;
    padding: 0.3rem 0.65rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.app-sidebar-nav .nav-link i {
    width: 1.1rem;
    font-size: 1rem;
    text-align: center;
    opacity: 0.9;
}

.app-sidebar-nav .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

.app-sidebar-nav .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 3px 0 0 var(--woh-orange);
}

.sidebar-collapse-closed,
.sidebar-collapse-sr-closed {
    display: none;
}

.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) .app-sidebar-top {
    justify-content: center;
    padding: 0 0.35rem;
}

.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) .app-sidebar-top .brand {
    display: none;
}

.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) .nav-group-label,
.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) .app-sidebar-nav .nav-link span {
    display: none;
}

.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) .app-sidebar-nav .nav-link {
    justify-content: center;
    padding: 0.4rem 0;
}

.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) .sidebar-collapse {
    justify-content: center;
    width: calc(100% - 0.7rem);
    margin-left: 0.35rem;
    margin-right: 0.35rem;
    padding: 0.4rem 0;
}

.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) .sidebar-collapse-label,
.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) .sidebar-collapse-sr-open,
.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) .sidebar-collapse-open {
    display: none;
}

.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) .sidebar-collapse-closed {
    display: inline;
}

.app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) .sidebar-collapse-sr-closed {
    display: inline;
}

.app-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--woh-topbar-height);
    padding: 0 1rem;
    background: var(--woh-hero);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 12;
}

.app-topbar .account-menu {
    margin-left: 0;
    order: 0;
}

.app-topbar-org {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.app-main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    background: var(--woh-bg);
}

.impersonation-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.45rem 1rem;
    background: #3d2a12;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 650;
}

.impersonation-bar .btn {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}

.app-mobile-bottom,
.mobile-more-backdrop,
.mobile-more-sheet {
    display: none;
}

.getting-started {
    margin-bottom: 0.85rem;
    padding: 0;
    background: none;
    border: 0;
}

.getting-started-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.15rem;
}

.getting-started-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
}

.getting-started-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: -0.25rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--woh-faint);
    cursor: pointer;
}

.getting-started-dismiss:hover,
.getting-started-dismiss:focus-visible {
    background: var(--woh-hover);
    color: var(--woh-ink);
}

.getting-started-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.65rem 0 0.35rem;
}

.getting-started-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon title"
        "copy copy"
        "button button";
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.35rem;
    min-height: 100%;
    padding: 0.9rem;
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    background: #fff;
}

.getting-started-card > .bi {
    grid-area: icon;
    font-size: 1.25rem;
    color: var(--woh-orange);
}

.getting-started-card h3 {
    grid-area: title;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.getting-started-card p {
    grid-area: copy;
}

.getting-started-card .btn {
    grid-area: button;
    justify-self: start;
}

.getting-started-card p {
    margin: 0 0 0.35rem;
    color: var(--woh-muted);
    font-size: 0.875rem;
}

.getting-started-card.is-done {
    opacity: 0.72;
}

.getting-started-note {
    color: var(--woh-faint);
    font-size: 0.75rem;
}

.getting-started-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.35rem;
}

.getting-started-next {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--woh-ink);
    font-weight: 700;
    text-decoration: none;
}

.getting-started-invite {
    margin-left: auto;
    color: var(--woh-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

.getting-started-invite button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--woh-orange);
    font: inherit;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

.getting-started-invite button:hover,
.getting-started-invite button:focus-visible {
    text-decoration: underline;
}

.getting-started-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.85rem;
    margin-bottom: 0.65rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    background: #fff;
    font-size: 0.875rem;
}

.getting-started-strip a,
.getting-started-strip button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--woh-orange);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.dash-guide-restore {
    margin: 1.5rem 0 0;
    text-align: center;
}

.dash-guide-restore a {
    color: var(--woh-muted);
    font-size: 0.8125rem;
    font-weight: 650;
}

.getting-started-follow {
    list-style: none;
    margin: 0;
    padding: 0;
}

.getting-started-follow li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--woh-line);
}

.getting-started-follow a,
.getting-started-follow button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--woh-ink);
    font: inherit;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.getting-started-follow .is-locked {
    color: var(--woh-faint);
}

.getting-started-follow .is-done a,
.getting-started-follow .is-done button {
    color: var(--woh-muted);
}

.ghost-dashboard {
    opacity: 0.55;
    filter: saturate(0.45);
    pointer-events: none;
    user-select: none;
}

.hire-page-skeleton {
    padding: 1.25rem 0 2rem;
}

.skeleton-line {
    height: 0.9rem;
    margin: 0.7rem 0;
    border-radius: 6px;
    background: linear-gradient(90deg, #e7edf1 25%, #f7f9fb 50%, #e7edf1 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

.skeleton-line-title {
    width: min(16rem, 70%);
    height: 1.6rem;
}

.skeleton-line-short {
    width: min(10rem, 45%);
}

.dashboard-skeleton .skeleton-card {
    min-height: 9rem;
    background: linear-gradient(90deg, #e7edf1 25%, #f7f9fb 50%, #e7edf1 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

.dashboard-skeleton-islands {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.dashboard-skeleton-islands span {
    width: 9rem;
    height: 6.5rem;
    border-radius: 50%;
    background: linear-gradient(90deg, #e7edf1 25%, #f7f9fb 50%, #e7edf1 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.ghost-banner {
    margin: 0 0 0.65rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--woh-radius);
    background: #f3f1ee;
    color: var(--woh-muted);
    font-size: 0.8125rem;
    font-weight: 650;
}

.ghost-dashboard .dash-switch {
    margin-bottom: 0.65rem;
}

.ghost-dashboard .dash-stat-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ghost-dashboard .dashboard-kpi-label {
    font-size: 0.7rem;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ghost-dashboard .site-map-wrap {
    display: flex;
    flex-direction: column;
    height: auto;
}

.ghost-dashboard .board-stage,
.ghost-dashboard .board-fit,
.ghost-dashboard .site-map.is-flow {
    position: static;
    inset: auto;
    height: auto;
    min-height: 220px;
    max-height: none;
}

.ghost-dashboard .site-map.is-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: clamp(48px, 6%, 96px);
    width: auto;
    padding: 0.75rem 0.5rem 0.25rem;
    overflow: visible;
}

.ghost-dashboard .site-isle,
.ghost-dashboard .site-plot {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    flex: 0 1 auto;
    max-width: 100%;
}

.ghost-dashboard .site-isle-float {
    animation: none;
}

.ghost-dashboard .site-isle-shape,
.ghost-dashboard .site-isle-name,
.ghost-dashboard .site-isle-chip,
.ghost-dashboard .site-isle-counts {
    overflow: visible;
}

.ghost-dashboard .site-isle-shape {
    overflow: hidden;
}

.ghost-dashboard .site-isle-name,
.ghost-dashboard .site-isle-chip {
    position: relative;
    z-index: 2;
    display: flex;
    max-width: 12.5rem;
    margin-top: 0.35rem;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: normal;
    line-height: 1.25;
}

.ghost-dashboard .site-map-legend {
    position: static;
    margin: 0.75rem 0 0.25rem;
}

@media (min-width: 1920px) {
    .ghost-dashboard .site-isle,
    .ghost-dashboard .site-plot {
        zoom: 1.15;
    }
}

@media (min-width: 2560px) {
    .ghost-dashboard .site-isle,
    .ghost-dashboard .site-plot {
        zoom: 1.3;
    }
}

@media (max-width: 1200px) {
    .ghost-dashboard .dash-stat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .ghost-dashboard .site-isle,
    .ghost-dashboard .site-plot {
        flex: 1 1 calc(50% - 48px);
        max-width: 100%;
    }
}

@media (max-width: 500px) {
    .ghost-dashboard .is-narrow-hide {
        display: none;
    }
}

.empty-state-panel {
    padding: 1.25rem 1rem;
}

.empty-state-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.empty-state-text {
    margin: 0 0 0.85rem;
    color: var(--woh-muted);
}

.empty-state-panel .btn + .btn {
    margin-left: 0.5rem;
}

@media (max-width: 700px) {
    .getting-started-cards {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-top: 0.4rem;
    }

    .getting-started-head h2 {
        font-size: 0.95rem;
    }

    .getting-started-card {
        grid-template-areas:
            "icon title"
            "icon copy"
            "button button";
        row-gap: 0.2rem;
        padding: 0.55rem 0.65rem 0.6rem;
    }

    .getting-started-card p {
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .getting-started-card .btn {
        width: 100%;
        min-height: 2.25rem;
        justify-self: stretch;
    }

    .getting-started-foot {
        margin-top: 0.25rem;
    }
}

.getting-started-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.getting-started-steps li + li {
    border-top: 1px solid var(--woh-line);
}

.getting-started-step {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.45rem 0.1rem;
    border: 0;
    background: none;
    color: var(--woh-ink);
    font: inherit;
    font-weight: 550;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.getting-started-step .bi {
    flex: 0 0 1.15rem;
    width: 1.15rem;
    font-size: 1.05rem;
    line-height: 1;
    text-align: center;
    color: var(--woh-faint);
}

.getting-started-step.is-done .bi {
    color: var(--woh-success);
}

.getting-started-step.is-done span {
    color: var(--woh-muted);
}

.getting-started-step:hover span,
.getting-started-step:focus-visible span {
    color: var(--woh-orange);
}

.setup-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.85rem;
    min-height: 2.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
    background: var(--woh-surface);
    border: 1px solid var(--woh-line);
    border-radius: 8px;
    box-shadow: var(--woh-shadow);
}

.setup-banner p,
.setup-banner-link,
.setup-banner-dismiss {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.setup-banner p {
    margin: 0;
    color: var(--woh-muted);
}

.setup-banner p .bi {
    margin-right: 0.4rem;
    color: var(--woh-faint);
}

.setup-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 0 0 auto;
}

.setup-banner-link {
    font-weight: 650;
    color: var(--woh-secondary);
    text-decoration: none;
}

button.setup-banner-link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.setup-banner-link:hover {
    color: var(--woh-secondary-hover);
}

.setup-banner.is-info,
.setup-banner.is-nudge {
    flex-wrap: nowrap;
}

.setup-banner.is-nudge {
    gap: 0.75rem;
    background: var(--woh-amber-bg);
    border-color: var(--woh-warning-border);
    box-shadow: inset 3px 0 0 #e0a54a;
}

.setup-banner.is-nudge p {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--woh-ink);
}

.setup-banner.is-nudge p .bi {
    color: var(--woh-amber);
}

.setup-banner.is-nudge .setup-banner-link {
    color: var(--woh-orange);
}

.setup-banner.is-nudge .setup-banner-link:hover {
    color: var(--woh-orange-hover);
}

.setup-banner-dismiss {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 650;
    color: var(--woh-faint);
}

.setup-banner-dismiss:hover,
.setup-banner-dismiss:focus-visible {
    color: var(--woh-muted);
}

.form-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem -1rem -0.85rem;
    padding: 0.7rem 1rem;
    background: var(--woh-bg);
    border-top: 1px solid var(--woh-border);
}

.form-sticky-actions > .btn-primary,
.form-sticky-actions > .form-sticky-actions-end,
.form-sticky-actions > :last-child:not(:first-child) {
    margin-left: auto;
}

.form-sticky-actions-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 1100px) {
    .task-page-main .form-sticky-actions {
        width: calc(100% + 16rem + 1.5rem);
    }
}

.meta-split {
    padding-left: 0.85rem;
}

.compact-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--woh-line);
}

.compact-row:last-child {
    border-bottom: 0;
}

.field-home {
    max-width: 40rem;
}

.field-home-kicker {
    margin: 0 0 0.25rem;
    color: var(--woh-muted);
    font-size: 0.8125rem;
    font-weight: 650;
}

.field-home-title {
    margin: 0 0 0.85rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.field-home-cta {
    width: 100%;
    min-height: 3.25rem;
    font-size: 1.05rem;
}

.field-home-section {
    margin-top: 1.35rem;
}

.field-home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.field-home-section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
}

.app-content .mb-3,
.task-drawer-body .mb-3 {
    margin-bottom: 1.25rem !important;
}

.app-content .mb-4 {
    margin-bottom: 0.85rem !important;
}

.cards-mobile.row {
    --bs-gutter-y: 0.4rem;
}

.more-details {
    margin-top: 0.75rem;
}

.more-details > summary {
    cursor: pointer;
    color: var(--woh-muted);
    font-size: 0.875rem;
    font-weight: 650;
    list-style: none;
}

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

.more-details > summary::after {
    content: " ▾";
    font-size: 0.75rem;
}

.more-details[open] > summary::after {
    content: " ▴";
}

.more-details .details-grid {
    margin-top: 0.65rem;
}

.dashboard-sheet-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--woh-line);
    background: var(--woh-subtle);
}

.dashboard-sheet-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .app-shell.has-app-nav,
    .app-shell.has-app-nav:has(.sidebar-collapsed-check:checked) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--woh-topbar-height) minmax(0, 1fr);
        grid-template-areas:
            "topbar"
            "main";
    }

    .app-sidebar,
    .sidebar-collapse {
        display: none;
    }

    .app-content {
        padding-bottom: calc(var(--woh-mobile-bar) + env(safe-area-inset-bottom, 0px));
        padding-top: 0.75rem;
    }

    /* Shell-wide mobile header density (all main pages; Add-hire uses its own mobile block) */
    .app-shell.has-app-nav .app-content .page-header {
        margin-bottom: 0.55rem;
    }

    .app-shell.has-app-nav .app-content .page-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .app-shell.has-app-nav .app-content .page-header-row > :first-child,
    .app-shell.has-app-nav .app-content .page-header-row > div:not(.page-header-leading):not(.page-header-action-stack) {
        flex: 0 1 auto;
    }

    .app-shell.has-app-nav .app-content .page-header-action-stack {
        align-items: stretch;
        width: 100%;
    }

    .app-shell.has-app-nav .app-content .page-header-actions {
        flex: 0 0 auto;
        width: 100%;
        gap: 0.2rem;
    }

    .app-shell.has-app-nav .app-content .page-header-actions .btn {
        flex: 0 0 auto;
        width: 100%;
        min-height: 2.5rem;
    }

    .app-shell.has-app-nav .app-content .page-detail .page-header-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
    }

    .app-shell.has-app-nav .app-content .page-detail .page-header-actions .btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        min-height: var(--woh-control-height);
    }

    .app-shell.has-app-nav .app-content .page-detail .page-header-actions .btn-primary,
    .app-shell.has-app-nav .app-content .page-detail .page-header-actions .btn-danger {
        flex: 1 1 100%;
        order: -1;
        width: 100%;
    }

    .app-shell.has-app-nav .app-content .page-detail .page-header-actions .overflow-menu {
        flex: 0 0 var(--woh-control-height);
        order: 1;
    }

    .app-shell.has-app-nav .app-content .page-detail .page-header-quiet-actions {
        justify-content: flex-start;
    }

    .page-detail .page-header-actions .owned-on-hire-actions {
        flex: 1 1 100%;
        order: -1;
        flex-direction: column;
        align-items: stretch;
        max-width: none;
    }

    .page-detail .page-header-actions .owned-on-hire-actions .owned-on-hire-note {
        max-width: none;
        text-align: left;
        order: 0;
    }

    .app-shell.has-app-nav .app-content .page-detail .page-header-actions .owned-on-hire-actions .btn-primary,
    .page-detail .page-header-actions .owned-on-hire-actions .btn-primary {
        order: 1;
        width: 100%;
    }

    .app-shell.has-app-nav .app-content .page-title {
        font-size: 1.375rem;
        margin-bottom: 0.1rem;
        line-height: 1.2;
    }

    .app-shell.has-app-nav .app-content .page-subtitle {
        display: none;
    }

    .app-shell.has-app-nav .app-content .page-lead {
        margin-bottom: 0.65rem !important;
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .app-shell.has-app-nav .app-content .setup-banner {
        margin-bottom: 0.55rem;
    }

    .app-shell.has-app-nav .app-content .dashboard-kpi-panel,
    .app-shell.has-app-nav .app-content .dashboard-needs-panel {
        margin-bottom: 0.65rem;
    }

    .app-shell.has-app-nav .app-content .dashboard-approx-note {
        margin: -0.2rem 0 0.55rem;
    }

    .app-shell.has-app-nav .app-content .report-chart-grid {
        margin-bottom: 0.65rem;
        gap: 0.65rem;
    }

    .app-shell.has-app-nav .app-content .report-catalog {
        gap: 0.65rem;
        margin-bottom: 0.75rem;
    }

    .app-shell.has-app-nav .app-content .field-home-kicker {
        margin-bottom: 0.15rem;
    }

    .app-shell.has-app-nav .app-content .field-home-title {
        margin-bottom: 0.55rem;
        font-size: 1.375rem;
    }

    .app-shell.has-app-nav .app-content .field-home-section {
        margin-top: 0.85rem;
    }

    .app-shell.has-app-nav .app-content .collection-section {
        margin-top: 1rem;
    }

    .app-shell.has-app-nav .app-content .reminder-pause-banner {
        margin-bottom: 0.75rem !important;
    }

    .app-shell.has-app-nav .app-content .settings-panel.is-padded {
        padding: 1rem;
    }

    .app-shell.has-app-nav .app-content .settings-section + .settings-section {
        margin-top: 0.85rem;
        padding-top: 0.85rem;
    }

    .app-mobile-bottom {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 26;
        min-height: var(--woh-mobile-bar);
        padding: 0.25rem 0.35rem calc(0.25rem + env(safe-area-inset-bottom));
        background: var(--woh-hero);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-height: 3.25rem;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.52);
        font-size: 0.6875rem;
        font-weight: 650;
        text-decoration: none;
        cursor: pointer;
        position: relative;
    }

    .mobile-tab i {
        font-size: 1.15rem;
        transition: color 120ms ease, transform 120ms ease;
    }

    .mobile-tab:hover {
        color: rgba(255, 255, 255, 0.82);
    }

    .mobile-tab.active,
    .mobile-tab.is-active {
        color: #fff;
    }

    .mobile-tab.active i,
    .mobile-tab.is-active i {
        color: #fff;
        transform: translateY(-1px);
    }

    .mobile-tab.active::before,
    .mobile-tab.is-active::before {
        content: "";
        position: absolute;
        top: 0.2rem;
        left: 50%;
        transform: translateX(-50%);
        width: 1.35rem;
        height: 2px;
        border-radius: 999px;
        background: var(--woh-orange);
    }

    .mobile-tab-primary {
        color: #fff;
    }

    .mobile-tab-primary::before {
        display: none;
    }

    .mobile-tab-primary i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.85rem;
        height: 1.85rem;
        border-radius: 999px;
        background: var(--woh-orange);
        font-size: 1rem;
    }

    .mobile-more-close-icon {
        display: none;
    }

    .app-shell.has-app-nav:has(.mobile-more-check:checked) .app-mobile-bottom {
        border-top-color: transparent;
    }

    .app-shell.has-app-nav:has(.mobile-more-check:checked) .mobile-tab-more {
        color: #fff;
    }

    .app-shell.has-app-nav:has(.mobile-more-check:checked) .mobile-more-open-icon {
        display: none;
    }

    .app-shell.has-app-nav:has(.mobile-more-check:checked) .mobile-more-close-icon {
        display: inline;
    }

    .app-shell.has-app-nav:has(.mobile-more-check:checked) .mobile-more-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 22;
        background: rgba(20, 22, 26, 0.4);
    }

    .app-shell.has-app-nav:has(.mobile-more-check:checked) .mobile-more-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--woh-mobile-bar);
        z-index: 24;
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
        padding: 0.15rem max(1rem, env(safe-area-inset-right)) 0.85rem max(1rem, env(safe-area-inset-left));
        background: var(--woh-hero);
        color: #fff;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0;
        box-shadow: none;
    }

    .mobile-more-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0;
        padding: 0.45rem 0 0.2rem;
        color: rgba(255, 255, 255, 0.7);
        font-size: 1.15rem;
        cursor: pointer;
    }

    .mobile-more-handle:hover {
        color: #fff;
    }

    .mobile-more-groups {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1.5rem;
        padding: 0.15rem 0 0.25rem;
    }

    .mobile-more-col {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
    }

    @media (max-width: 359.98px) {
        .mobile-more-groups {
            grid-template-columns: 1fr;
        }
    }

    .mobile-more-sheet .nav-group-label {
        margin-bottom: 0.35rem;
        color: rgba(255, 255, 255, 0.48);
        font-size: 0.6875rem;
        font-weight: 650;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .mobile-more-sheet a {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-height: 2.15rem;
        padding: 0.25rem 0.15rem;
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 0.9375rem;
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-more-sheet a i {
        width: 1.1rem;
        text-align: center;
        opacity: 0.85;
    }

    .mobile-more-sheet a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.07);
    }

    .form-sticky-actions {
        bottom: var(--woh-mobile-bar);
    }

    .app-notice-toast {
        bottom: calc(var(--woh-mobile-bar) + env(safe-area-inset-bottom, 0px) + 0.75rem);
    }

    .field-home-cta {
        min-height: 3.5rem;
    }
}

@media (min-width: 768px) {
    .field-home-cta {
        width: auto;
        min-width: 16rem;
    }
}

/* Centre-page system: collection / task drawer / record */

.collection-page .filter-strip,
.collection-page .filter-bar,
.collection-toolbar {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--woh-subtle);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    box-shadow: none;
}

.collection-page .filter-strip .filter-bar {
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.collection-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.collection-meta {
    margin: 0 0 0.75rem;
    color: var(--woh-faint);
    font-size: 0.8125rem;
}

.collection-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
}

.collection-meta-row .collection-meta {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.collection-meta-row .panel-action {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.data-panel {
    background: var(--woh-white);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    box-shadow: none;
    overflow: hidden;
    min-height: 8rem;
}

.data-panel.is-padded {
    padding: 1.5rem 1.25rem;
}

.data-panel + .data-panel {
    margin-top: 1rem;
}

.collection-results {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.collection-page .table,
.collection-table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--woh-hover);
    background: transparent;
    margin-bottom: 0;
}

.collection-page .table > :not(caption) > * > *,
.collection-table > :not(caption) > * > * {
    background: transparent;
    box-shadow: none;
    border-bottom-color: var(--woh-line);
}

.collection-page .table thead th,
.collection-table thead th {
    color: var(--woh-faint);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    background: var(--woh-subtle);
    border-bottom: 1px solid var(--woh-line);
    padding: 0.7rem 1rem;
}

.collection-page .table td,
.collection-table td {
    padding: 0.7rem 1rem;
    min-height: 3.25rem;
    font-size: 0.875rem;
    color: var(--woh-muted);
    vertical-align: middle;
}

.collection-page .table td:first-child,
.collection-table td:first-child {
    color: var(--woh-ink);
}

.collection-page .table .money,
.collection-table .money,
.collection-page .table thead th.money,
.collection-table thead th.money {
    color: var(--woh-ink);
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.collection-page .table .record-row-actions,
.collection-table .record-row-actions,
.collection-page .table thead th.col-actions,
.collection-table thead th.col-actions {
    text-align: right;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.hires-list-page .table thead th.col-actions,
.hires-list-page .table .record-row-actions {
    width: 1%;
}

.record-row-action-cluster {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    position: relative;
    z-index: 2;
    vertical-align: middle;
}

.collection-page .cards-mobile .clickable-card,
.collection-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--woh-line);
    border-radius: 0;
    box-shadow: none;
    padding: 0.85rem 1rem;
    min-height: 2.75rem;
}

.collection-page .cards-mobile .clickable-card.is-attention {
    border-left: 3px solid var(--woh-charcoal);
    padding-left: 0.7rem;
}

.collection-section {
    margin: 1.75rem 0 0;
}

.collection-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--woh-line);
}

@media (min-width: 992px) {
    .collection-page .data-panel.table-desktop,
    .collection-page .data-panel.table-desktop .table-responsive {
        overflow: visible;
    }
}

.task-drawer-page {
    min-height: 0;
}

.task-drawer-backdrop {
    display: none;
}

.task-drawer {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100dvh - var(--woh-topbar-height) - 2.5rem);
    background: var(--woh-white);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
}

.task-drawer-header {
    flex-shrink: 0;
    padding: 1.15rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--woh-line);
}

.task-drawer-title {
    margin: 0;
    color: var(--woh-ink);
    font-size: 1.2rem;
    font-weight: 750;
    letter-spacing: -0.03em;
}

.task-drawer-lead {
    margin: 0.35rem 0 0;
    color: var(--woh-faint);
    font-size: 0.8125rem;
}

.task-drawer.is-fit {
    min-height: 0;
}

.task-drawer.is-fit .task-drawer-form,
.task-drawer.is-fit .task-drawer-body {
    flex: 0 0 auto;
}

.task-drawer-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.task-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.1rem 1.25rem 1.25rem;
}

.task-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--woh-line);
    background: var(--woh-white);
}

.task-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 56rem;
    margin: 0;
}

.task-page-main {
    min-width: 0;
}

.task-section {
    padding: 1.15rem 0 1.25rem;
    border-bottom: 1px solid var(--woh-line);
}

.task-section:last-of-type {
    border-bottom: 0;
}

.task-section-title {
    margin: 0 0 0.75rem;
    color: var(--woh-ink);
    font-size: 0.875rem;
    font-weight: 700;
}

.task-line {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--woh-line);
}

.task-line:last-child {
    border-bottom: 0;
}

.task-page-aside {
    display: none;
}

.record-page {
    max-width: 72rem;
}

.record-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem 2rem;
    max-width: 72rem;
    align-items: start;
}

.record-main {
    min-width: 0;
}

.record-rail {
    padding: 0.85rem 1rem;
    background: var(--woh-subtle);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    box-shadow: none;
}

.record-rail-title {
    margin: 0 0 0.35rem;
    color: var(--woh-faint);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.meta-property {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--woh-line);
}

.meta-property:last-of-type {
    border-bottom: 0;
    padding-bottom: 0.15rem;
}

.meta-property-label {
    flex: 0 0 6.25rem;
    color: var(--woh-faint);
    font-size: 0.6875rem;
    font-weight: 650;
    padding-top: 0.12rem;
}

.meta-property-value {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--woh-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-property-value a {
    color: inherit;
    text-decoration: none;
}

.meta-property-value a:hover {
    text-decoration: underline;
}

.record-rail-note {
    margin: 0.75rem 0 0;
    color: var(--woh-faint);
    font-size: 0.75rem;
    font-weight: 500;
}

.record-rail-note a {
    color: inherit;
}

@media (min-width: 992px) {
    .record-layout {
        grid-template-columns: minmax(0, 1fr) 19rem;
    }

    .record-rail {
        position: sticky;
        top: 0.75rem;
    }
}

.record-section {
    padding: 0.95rem 0 1.05rem;
    margin-bottom: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--woh-line);
    border-radius: 0;
    box-shadow: none;
}

.record-section:last-child {
    border-bottom: 0;
}

.dashboard-page .dashboard-sheet,
.dashboard-kpi-panel,
.dashboard-needs-panel {
    background: var(--woh-white);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    box-shadow: none;
    padding: 0;
    margin-bottom: 1rem;
    overflow: hidden;
}

.dashboard-page .dashboard-kpis {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.dashboard-page .dashboard-hire-row {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--woh-line);
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0.85rem 1rem;
}

.dashboard-page .dashboard-hire-row:last-child {
    border-bottom: 0;
}

.dashboard-page .dashboard-hire-row:hover,
.dashboard-page .dashboard-hire-row:focus-within {
    background: var(--woh-hover);
    box-shadow: none;
}

@media (min-width: 1100px) {
    .task-page {
        grid-template-columns: minmax(0, 1fr) 16rem;
        max-width: 72rem;
        margin: 0;
        align-items: start;
    }

    .task-page-aside {
        display: block;
        position: sticky;
        top: 0.75rem;
        padding: 1rem 0 0;
        color: var(--woh-faint);
        font-size: 0.8125rem;
    }

    .task-page-aside h2 {
        margin: 0 0 0.45rem;
        color: var(--woh-faint);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .task-page-aside p,
    .task-page-aside li {
        margin: 0 0 0.35rem;
    }
}

@media (max-width: 991.98px) {
    .task-drawer {
        min-height: calc(100dvh - var(--woh-topbar-height) - var(--woh-mobile-bar) - 2rem);
    }
}

.report-catalog {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.report-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.9rem 1rem;
    padding: 1.1rem 1.15rem;
    background: var(--woh-white);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    color: inherit;
    text-decoration: none;
    min-height: 8.5rem;
    transition: background var(--woh-transition), border-color var(--woh-transition);
}

.report-tile:hover,
.report-tile:focus-visible {
    color: inherit;
    background: var(--woh-hover);
    border-color: var(--woh-line-strong);
}

.report-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--woh-secondary-soft);
    color: var(--woh-secondary);
    font-size: 1.15rem;
}

.report-tile-icon.is-warning {
    background: var(--woh-primary-soft);
    color: var(--woh-primary);
}

.report-tile-body {
    min-width: 0;
}

.report-tile-title {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--woh-ink);
}

.report-tile-copy {
    margin: 0 0 0.65rem;
    color: var(--woh-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.report-tile-stat {
    margin: 0;
    color: var(--woh-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.report-tile-chevron {
    color: var(--woh-faint);
    font-size: 1.1rem;
    margin-top: 0.2rem;
}

.report-buckets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--woh-white);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.report-bucket {
    padding: 0.95rem 1rem 1.05rem;
    border-bottom: 1px solid var(--woh-line);
}

.report-bucket:nth-child(odd) {
    border-right: 1px solid var(--woh-line);
}

.report-bucket:nth-last-child(-n+2) {
    border-bottom: 0;
}

.report-bucket-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--woh-faint);
    margin-bottom: 0.3rem;
}

.report-bucket-value {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--woh-ink);
}

.report-bucket.is-long .report-bucket-value {
    color: var(--woh-amber);
}

.report-bucket.is-empty .report-bucket-value,
.report-bucket.is-empty .report-bucket-meta {
    color: var(--woh-faint);
}

.report-bucket-meta {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--woh-muted);
}

.report-share-cell {
    min-width: 9rem;
}

.report-share {
    display: block;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--woh-subtle);
    overflow: hidden;
}

.report-share-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--woh-orange);
}

.report-share-label {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--woh-faint);
}

.cards-mobile .report-share {
    margin-top: 0.35rem;
}

.report-days-long {
    color: var(--woh-amber);
    font-weight: 650;
}

.report-kpi-split .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.report-chart-panel {
    background: var(--woh-white);
    border: 1px solid var(--woh-line);
    border-radius: var(--woh-radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.report-chart-grid .report-chart-panel {
    margin-bottom: 0;
}

.report-chart-panel-head {
    padding: 0.95rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--woh-line);
}

.report-chart-panel-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--woh-ink);
}

.report-chart-panel-sub {
    margin: 0.2rem 0 0;
    color: var(--woh-muted);
    font-size: 0.8125rem;
}

.report-chart-panel-body {
    padding: 1rem 1.1rem 1.15rem;
}

.tone-orange { --report-tone: var(--woh-orange); }
.tone-secondary { --report-tone: var(--woh-secondary); }
.tone-orange-mid { --report-tone: var(--woh-orange-mid); }
.tone-secondary-mid { --report-tone: var(--woh-secondary-mid); }
.tone-blue { --report-tone: #3a94bc; }
.tone-navy { --report-tone: #1b3354; }
.tone-green { --report-tone: #2f7d4a; }
.tone-gold { --report-tone: #b8860b; }
.tone-purple { --report-tone: #6b4c9a; }
.tone-teal { --report-tone: #1a7a72; }
.tone-amber { --report-tone: var(--woh-orange); }
.tone-ink { --report-tone: var(--woh-secondary-hover); }
.tone-info { --report-tone: var(--woh-secondary-mid); }
.tone-faint { --report-tone: var(--woh-faint); }

.report-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.report-bar-copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.report-bar-label {
    color: var(--woh-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.report-bar-label:hover,
a.report-bar-label:focus-visible {
    color: var(--woh-ink);
}

.report-bar-value {
    color: var(--woh-ink);
    font-size: 0.875rem;
    font-weight: 650;
    white-space: nowrap;
}

.report-bar-track {
    height: 0.55rem;
    border-radius: 999px;
    background: var(--woh-subtle);
    overflow: hidden;
}

.report-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--report-tone, var(--woh-orange));
    min-width: 0.35rem;
}

.report-column-chart {
    display: flex;
    align-items: stretch;
    gap: 0.65rem;
    min-height: 13.5rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
}

.report-column {
    flex: 1 1 0;
    min-width: 3.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.report-column-value {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--woh-ink);
    margin-bottom: 0.35rem;
    white-space: nowrap;
}

.report-column-track {
    flex: 1 1 auto;
    width: 100%;
    max-width: 2.4rem;
    min-height: 8rem;
    border-radius: 999px;
    background: var(--woh-subtle);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.report-column-fill {
    display: block;
    width: 100%;
    min-height: 0;
    border-radius: inherit;
    background: var(--report-tone, var(--woh-orange));
}

.report-column:not(.is-empty) .report-column-fill {
    min-height: 0.35rem;
}

.report-column.is-empty .report-column-value,
.report-column.is-empty .report-column-label {
    color: var(--woh-faint);
}

.report-column-label {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--woh-muted);
    line-height: 1.25;
}

.report-column-chart.is-dense {
    gap: 0.4rem;
}

.report-column-chart.is-dense .report-column {
    min-width: 2.4rem;
}

.report-column-chart.is-dense .report-column-value {
    font-size: 0.6875rem;
}

.report-column-chart.is-dense .report-column-track {
    max-width: 1.65rem;
}

.report-donut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
}

.report-donut-graphic {
    position: relative;
    width: 11rem;
    height: 11rem;
    flex: 0 0 auto;
}

.report-donut-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.report-donut-track {
    fill: none;
    stroke: var(--woh-subtle);
    stroke-width: 16;
}

.report-donut-slice {
    fill: none;
    stroke: var(--report-tone, var(--woh-orange));
    stroke-width: 16;
    stroke-linecap: butt;
}

.report-donut-center {
    position: absolute;
    inset: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.report-donut-center-value {
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--woh-ink);
}

.report-donut-center-label {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--woh-faint);
}

.report-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 10rem;
    flex: 1 1 12rem;
}

.report-donut-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.report-donut-swatch {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--report-tone, var(--woh-orange));
    margin-top: 0.3rem;
    flex-shrink: 0;
}

.report-donut-legend-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.report-donut-legend-label {
    color: var(--woh-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

a.report-donut-legend-label:hover,
a.report-donut-legend-label:focus-visible {
    color: var(--woh-ink);
}

.report-donut-legend-meta {
    color: var(--woh-faint);
    font-size: 0.75rem;
}

@media (min-width: 768px) {
    .report-chart-grid,
    .report-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-buckets {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .report-bucket,
    .report-bucket:nth-child(odd) {
        border-right: 1px solid var(--woh-line);
        border-bottom: 0;
    }

    .report-bucket:last-child {
        border-right: 0;
    }
}

/* Mobile Add Hire */

@media (max-width: 767.98px) {
    .app-shell.has-app-nav.is-add-hire-wizard {
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "main";
        height: 100vh;
        height: 100dvh;
    }

    .app-shell.has-app-nav.is-add-hire-wizard .app-topbar,
    .app-shell.has-app-nav.is-add-hire-wizard .app-mobile-bottom,
    .app-shell.has-app-nav.is-add-hire-wizard .mobile-more-backdrop,
    .app-shell.has-app-nav.is-add-hire-wizard .mobile-more-sheet {
        display: none !important;
    }

    .app-shell.has-app-nav.is-add-hire-wizard .app-main {
        height: 100%;
        overflow: hidden;
        background: #fcfcfd;
    }

    .app-shell.has-app-nav.is-add-hire-wizard .app-content {
        max-width: none;
        height: 100%;
        padding: 0;
    }
}

.add-hire-mobile {
    display: none;
}

.add-hire-desktop {
    display: block;
}

@media (max-width: 767.98px) {
    .add-hire-desktop {
        display: none;
    }

    .add-hire-mobile {
        --add-hire-bg: #fcfcfd;
        --add-hire-ink: #17191c;
        --add-hire-muted: #667085;
        --add-hire-faint: #98a2b3;
        --add-hire-line: #e4e7ec;
        --add-hire-surface: #f7f8fa;
        --add-hire-radius: 12px;
        --add-hire-selected: #fff1eb;
        --woh-visible-height: 100dvh;
        display: flex;
        flex-direction: column;
        color: var(--add-hire-ink);
        background: var(--add-hire-bg);
        margin: 0;
        padding: 0;
        min-width: 0;
        width: 100%;
        height: var(--woh-visible-height, 100dvh);
        max-height: var(--woh-visible-height, 100dvh);
        overflow: hidden;
    }

    .add-hire-wizard-header {
        flex-shrink: 0;
        padding: 0.55rem 1rem 0.45rem;
        padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
        background: var(--add-hire-bg);
        border-bottom: 1px solid var(--add-hire-line);
    }

    .add-hire-wizard-header-row {
        display: grid;
        grid-template-columns: 2.75rem minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.5rem;
    }

    .add-hire-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        flex-shrink: 0;
        margin: 0;
        border: 1px solid var(--add-hire-line);
        border-radius: 10px;
        background: var(--woh-white);
        color: var(--add-hire-ink);
        text-decoration: none;
        cursor: pointer;
        padding: 0;
    }

    .add-hire-close:hover,
    .add-hire-close:focus-visible {
        color: var(--add-hire-ink);
        background: var(--add-hire-surface);
    }

    .add-hire-title {
        margin: 0;
        color: var(--add-hire-ink);
        font-size: 1.125rem;
        font-weight: 750;
        letter-spacing: -0.03em;
        line-height: 1.2;
        text-align: center;
    }

    .add-hire-wizard-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 1.15rem 1.25rem;
    }

    .add-hire-wizard-body:has(+ .mobile-sticky-action) {
        padding-bottom: 1.25rem;
    }

    .add-hire-progress {
        margin: 0;
        color: var(--add-hire-faint);
        font-size: 0.75rem;
        font-weight: 550;
        white-space: nowrap;
    }

    .add-hire-progress-track {
        height: 3px;
        margin-top: 0.45rem;
        background: var(--add-hire-line);
        border-radius: 99px;
        overflow: hidden;
    }

    .add-hire-progress-fill {
        display: block;
        height: 100%;
        background: var(--woh-orange);
        border-radius: inherit;
    }

    .add-hire-mode-summary {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.15rem 0.25rem;
        margin: 0 0 0.25rem;
        color: var(--add-hire-ink);
        font-size: 0.875rem;
        font-weight: 650;
    }

    .add-hire-mode-summary .add-hire-chip-change {
        min-height: 2.25rem;
        margin: -0.35rem 0;
    }

    .hire-mode-selector {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.25rem;
        margin: 0 0 1.5rem;
        padding: 0.25rem;
        border-radius: var(--add-hire-radius);
        background: var(--add-hire-surface);
    }

    .hire-mode-option {
        min-height: 3rem;
        padding: 0.45rem 0.5rem;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--add-hire-muted);
        font-size: 0.8125rem;
        font-weight: 650;
        line-height: 1.2;
        cursor: pointer;
    }

    .hire-mode-option.is-selected {
        background: var(--woh-white);
        color: var(--add-hire-ink);
        box-shadow: 0 1px 2px rgba(17, 19, 24, 0.08);
    }

    .hire-mode-option:focus-visible {
        outline: 2px solid var(--woh-orange);
        outline-offset: 2px;
    }

    .add-hire-step-title {
        margin: 0;
        color: var(--add-hire-ink);
        font-size: 1.0625rem;
        font-weight: 750;
        letter-spacing: -0.02em;
    }

    .add-hire-step-lead {
        margin: 0.3rem 0 0;
        color: var(--add-hire-muted);
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .add-hire-step {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }

    .add-hire-section {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 0.5rem;
    }

    .mobile-choice-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .mobile-choice-grid.is-single {
        grid-template-columns: minmax(0, 1fr);
    }

    .mobile-choice-tile {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        min-height: 4.5rem;
        min-width: 0;
        width: 100%;
        margin: 0;
        padding: 0.75rem 0.8rem;
        border: 1px solid var(--add-hire-line);
        border-radius: var(--add-hire-radius);
        background: var(--woh-white);
        color: var(--add-hire-ink);
        text-align: left;
        cursor: pointer;
    }

    .mobile-choice-tile.is-compact {
        min-height: 3.5rem;
        align-items: center;
    }

    .mobile-choice-tile.is-selected {
        border-color: var(--woh-orange);
        background: var(--add-hire-selected);
    }

    .mobile-choice-tile:focus-visible {
        outline: 2px solid var(--woh-orange);
        outline-offset: 2px;
    }

    .mobile-choice-tile-icon {
        color: var(--add-hire-faint);
        font-size: 1rem;
        line-height: 1.4;
        flex-shrink: 0;
    }

    .mobile-choice-tile.is-selected .mobile-choice-tile-icon {
        color: var(--woh-orange);
    }

    .mobile-choice-tile-copy {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
        flex: 1;
    }

    .mobile-choice-tile-title {
        color: var(--add-hire-ink);
        font-size: 0.9375rem;
        font-weight: 700;
        line-height: 1.25;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .mobile-choice-tile-meta {
        color: var(--add-hire-muted);
        font-size: 0.75rem;
        line-height: 1.3;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .mobile-choice-tile-check {
        color: var(--woh-orange);
        font-size: 1rem;
        margin-left: auto;
        flex-shrink: 0;
    }

    .add-hire-search-all {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 3rem;
        width: 100%;
        padding: 0.5rem;
        border: 0;
        background: transparent;
        color: var(--add-hire-ink);
        font-size: 0.9375rem;
        font-weight: 700;
        cursor: pointer;
    }

    .add-hire-search-all:hover {
        color: var(--add-hire-ink);
    }

    .add-hire-search-all:focus-visible,
    .add-hire-chip-change:focus-visible,
    .hire-selection-summary-change:focus-visible,
    .add-hire-tab:focus-visible,
    .add-hire-more > summary:focus-visible {
        outline: 2px solid var(--woh-orange);
        outline-offset: 2px;
    }

    .add-hire-tabs {
        display: flex;
        gap: 1.1rem;
        border-bottom: 1px solid var(--add-hire-line);
    }

    .add-hire-tab {
        min-height: 2.75rem;
        padding: 0.4rem 0;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: var(--add-hire-muted);
        font-size: 0.9375rem;
        font-weight: 650;
        cursor: pointer;
    }

    .add-hire-tab.is-selected {
        color: var(--add-hire-ink);
        border-bottom-color: var(--woh-orange);
    }

    .add-hire-chip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.7rem 0.85rem;
        border: 1px solid var(--add-hire-line);
        border-radius: 10px;
        background: var(--add-hire-surface);
    }

    .add-hire-chip-label {
        display: block;
        color: var(--add-hire-faint);
        font-size: 0.75rem;
        font-weight: 650;
    }

    .add-hire-chip-value {
        display: block;
        color: var(--add-hire-ink);
        font-size: 0.9375rem;
        font-weight: 700;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .add-hire-chip-change {
        flex-shrink: 0;
        min-height: 2.75rem;
        padding: 0 0.15rem;
        border: 0;
        background: transparent;
        color: var(--woh-orange);
        font-size: 0.8125rem;
        font-weight: 700;
        cursor: pointer;
    }

    .add-hire-warning {
        padding: 0.75rem 0.85rem;
        border: 1px solid var(--add-hire-line);
        border-radius: 10px;
        background: var(--add-hire-surface);
    }

    .add-hire-warning p {
        margin: 0 0 0.65rem;
        color: var(--add-hire-ink);
        font-size: 0.875rem;
        font-weight: 650;
    }

    .add-hire-field {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .add-hire-field .form-label {
        margin: 0;
        color: var(--add-hire-ink);
        font-weight: 700;
    }

    .add-hire-field .form-control,
    .add-hire-more .form-control {
        min-height: 3rem;
        font-size: 1rem;
        border-color: var(--add-hire-line);
        border-radius: 10px;
    }

    .add-hire-help {
        margin: 0;
        color: var(--add-hire-muted);
        font-size: 0.75rem;
    }

    .hire-selection-summary {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding: 0.95rem 1rem;
        border-radius: var(--add-hire-radius);
        background: var(--add-hire-surface);
    }

    .hire-selection-summary-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin: -0.25rem 0 0.1rem;
    }

    .hire-selection-summary-toolbar-label {
        color: var(--add-hire-ink);
        font-size: 0.8125rem;
        font-weight: 750;
    }

    .hire-selection-summary-row {
        display: grid;
        grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
        align-items: start;
        gap: 0.35rem 0.75rem;
    }

    .hire-selection-summary-row.has-change {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 0.85rem;
        border-bottom: 1px solid var(--add-hire-line);
    }

    .hire-selection-summary-row.has-change:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .hire-selection-summary-heading {
        display: contents;
    }

    .hire-selection-summary-row.has-change .hire-selection-summary-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .hire-selection-summary-label {
        color: var(--add-hire-muted);
        font-size: 0.8125rem;
        line-height: 1.3;
    }

    .hire-selection-summary-value {
        color: var(--add-hire-ink);
        font-size: 0.9375rem;
        font-weight: 700;
        text-align: right;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.35;
    }

    .hire-selection-summary-row.has-change .hire-selection-summary-value {
        text-align: left;
    }

    .hire-selection-summary-change {
        flex-shrink: 0;
        min-height: 2.75rem;
        margin: -0.55rem -0.15rem;
        padding: 0 0.35rem;
        border: 0;
        background: transparent;
        color: var(--woh-orange);
        font-size: 0.8125rem;
        font-weight: 650;
        cursor: pointer;
    }

    .add-hire-more {
        border-top: 1px solid var(--add-hire-line);
        border-bottom: 1px solid var(--add-hire-line);
    }

    .add-hire-more > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 3rem;
        list-style: none;
        color: var(--add-hire-ink);
        font-weight: 700;
        cursor: pointer;
    }

    .add-hire-more > summary::-webkit-details-marker {
        display: none;
    }

    .add-hire-more > summary::after {
        content: "\F282";
        font-family: "bootstrap-icons";
        color: var(--add-hire-muted);
        font-weight: 400;
    }

    .add-hire-more[open] > summary::after {
        content: "\F286";
    }

    .add-hire-more-body {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding: 0 0 0.25rem;
    }

    .mobile-picker-sheet .add-hire-more-body .form-control {
        min-height: 3rem;
        font-size: 1rem;
        border-color: var(--add-hire-line);
        border-radius: 10px;
    }

    .add-hire-lines {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .add-hire-line {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.35rem 0;
    }

    .mobile-sticky-action {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 20;
        flex-shrink: 0;
        padding: 0.7rem 1.15rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
        background: var(--woh-white);
        border-top: 1px solid var(--add-hire-line);
        box-shadow: 0 -6px 16px rgba(17, 19, 24, 0.04);
    }

    .add-hire-mobile.is-keyboard-open .mobile-sticky-action {
        display: none;
    }

    .mobile-sticky-row {
        display: flex;
        align-items: stretch;
        gap: 0.55rem;
    }

    .mobile-sticky-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    .mobile-sticky-action .btn {
        min-height: 3rem;
        border-radius: 10px;
        font-size: 1rem;
    }

    .mobile-sticky-action .btn-outline-secondary:not(.add-hire-continue) {
        flex: 0 0 auto;
        min-width: 5.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .mobile-sticky-action .add-hire-continue {
        flex: 1 1 auto;
        width: auto;
    }

    .mobile-sticky-action .add-hire-continue.btn-outline-secondary:disabled {
        color: var(--woh-secondary);
        background: var(--woh-white);
        border-color: var(--woh-secondary);
        opacity: 1;
    }

    .mobile-picker-sheet {
        position: fixed;
        top: var(--woh-topbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: flex;
        flex-direction: column;
        background: var(--woh-white);
        min-width: 0;
    }

    .app-shell.has-app-nav.is-add-hire-wizard .mobile-picker-sheet {
        top: 0;
        height: var(--woh-visible-height, 100dvh);
        max-height: var(--woh-visible-height, 100dvh);
    }

    .mobile-picker-sheet-header {
        flex-shrink: 0;
        padding: 0.85rem 1rem 0.75rem;
        border-bottom: 1px solid var(--woh-line);
    }

    .mobile-picker-sheet-nav {
        margin-bottom: 0.35rem;
    }

    .mobile-picker-sheet-back {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        min-height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--woh-muted);
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-picker-sheet-back:hover,
    .mobile-picker-sheet-back:focus-visible {
        color: var(--woh-ink);
    }

    .mobile-picker-sheet-title {
        margin: 0;
        font-size: 1.375rem;
        font-weight: 650;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: var(--woh-ink);
    }

    .mobile-picker-sheet-search {
        padding: 0.5rem 1rem 0.75rem;
    }

    .mobile-picker-sheet-input {
        min-height: 3rem;
        font-size: 1rem;
        border-radius: 10px;
        background: var(--add-hire-surface);
        border-color: transparent;
    }

    .mobile-picker-sheet-body {
        flex: 1;
        min-height: 0;
        overflow: auto;
        padding: 0 1rem 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
    }

    .mobile-picker-sheet-header + .mobile-picker-sheet-body {
        padding-top: 0.75rem;
    }

    .mobile-picker-sheet-footer {
        padding: 0.75rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--add-hire-line);
        background: var(--woh-white);
    }

    .add-hire-empty {
        margin: 0;
        color: var(--add-hire-muted);
        font-size: 0.875rem;
    }
}

/* Mobile shell pass — main pages */

.hire-filters-mobile {
    display: none;
}

@media (max-width: 991.98px) {
    .collection-page .collection-toolbar.filter-bar,
    .collection-page .filter-bar.filter-bar-desktop {
        margin-bottom: 0.45rem;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .collection-page .filter-bar .form-label,
    .collection-page .filter-bar-view > .form-label {
        display: none;
    }

    .collection-page .filter-bar .form-control,
    .collection-page .filter-bar .form-select {
        min-height: 2.5rem;
    }

    .collection-page .filter-bar .list-search .form-control {
        border-radius: 10px;
    }

    .collection-page .filter-chips {
        margin-bottom: 0;
    }

    .collection-page .collection-meta {
        margin: 0 0 0.35rem;
    }

    .collection-page > .text-secondary {
        margin: -0.15rem 0 0.45rem;
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .collection-page .filter-bar > div {
        flex: 1 1 100%;
    }

    .collection-page .filter-bar > .filter-bar-view {
        flex: 1 1 100%;
    }

    .field-home {
        max-width: none;
    }

    .settings-page .form-narrow {
        max-width: none;
    }

    .settings-save {
        width: 100%;
        min-height: 2.5rem;
    }

    .reports-page .report-tile {
        min-height: 0;
        padding: 1rem;
    }

    .reports-page .report-tile-copy {
        display: none;
    }

    .reports-page .report-chart-panel {
        margin-bottom: 0;
    }

    .reports-page .report-chart-panel-head {
        padding: 0.75rem 0.95rem 0.55rem;
    }

    .filter-bar-desktop {
        display: none;
    }

    .hire-filters-mobile {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        margin-bottom: 0.45rem;
    }

    .hire-filter-search {
        width: 100%;
        min-height: 2.5rem;
        padding: 0.5rem 0.8rem;
        border: 1px solid var(--woh-line);
        border-radius: 10px;
        background: var(--woh-white);
        color: var(--woh-ink);
        font-size: 0.9375rem;
        box-shadow: none;
    }

    .hire-filter-search:focus {
        outline: 2px solid var(--woh-orange);
        outline-offset: 1px;
        border-color: transparent;
    }

    .hire-filter-chips {
        margin: 0;
    }

    .hire-filter-refine {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: stretch;
    }

    .hire-filter-trigger {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.05rem;
        flex: 1 1 calc(50% - 0.25rem);
        min-height: 2.65rem;
        padding: 0.35rem 0.65rem;
        border: 1px solid var(--woh-line);
        border-radius: 10px;
        background: var(--woh-white);
        color: var(--woh-ink);
        text-align: left;
        cursor: pointer;
    }

    .hire-filter-trigger.is-active {
        border-color: var(--woh-ink);
        background: rgba(20, 22, 26, 0.03);
    }

    .hire-filter-trigger-label {
        font-size: 0.6875rem;
        font-weight: 650;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--woh-faint);
    }

    .hire-filter-trigger-value {
        font-size: 0.875rem;
        font-weight: 650;
        color: var(--woh-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .hire-filter-clear {
        flex: 1 1 100%;
        min-height: 2.25rem;
        border: 0;
        background: transparent;
        color: var(--woh-muted);
        font-size: 0.8125rem;
        font-weight: 650;
        text-decoration: underline;
        cursor: pointer;
    }

    .hire-filter-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        min-height: 3rem;
        padding: 0.65rem 0.85rem;
        border: 1px solid var(--woh-line);
        border-radius: 10px;
        background: var(--woh-white);
        color: var(--woh-ink);
        font-size: 0.9375rem;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }

    .hire-filter-option.is-selected {
        border-color: var(--woh-ink);
        background: rgba(20, 22, 26, 0.03);
    }

    .hire-filter-option-check {
        color: var(--woh-orange);
        font-size: 1.05rem;
        flex-shrink: 0;
    }

    .hires-list-page .hire-filters-mobile {
        gap: 0.35rem;
        margin-bottom: 0.35rem;
    }

    .hires-list-page .collection-meta-row {
        margin: 1rem 0 0.8rem;
    }

    .collection-page .cards-mobile .data-panel {
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .collection-page .cards-mobile .clickable-card {
        gap: 0.4rem;
        padding: 0.7rem 0.9rem 0.8rem;
        min-height: 0;
    }

    .collection-page .cards-mobile .row > .col-12:first-child .clickable-card {
        padding-top: 0.35rem;
    }

    .collection-page .cards-mobile .clickable-card-link {
        font-size: 1rem;
        font-weight: 650;
        letter-spacing: -0.02em;
        line-height: 1.25;
    }

    .collection-page .cards-mobile .clickable-card-meta {
        font-size: 0.8125rem;
        color: var(--woh-muted);
        line-height: 1.35;
    }

    .collection-page .cards-mobile .clickable-card-stats {
        flex-direction: column;
        align-items: flex-start;
        font-size: 0.8125rem;
        gap: 0.15rem;
    }

    .collection-page .cards-mobile .clickable-card-affordance {
        color: var(--woh-faint);
    }

}

@media (min-width: 992px) {
    .hire-filters-mobile {
        display: none;
    }

    .settings-page .settings-panel.is-padded {
        padding: 1.1rem 1.2rem;
    }
}

/* Phone density: keep list and form pages usable without the Add Hire wizard treatment */
@media (max-width: 767.98px) {
    .app-shell.has-app-nav:not(.is-add-hire-wizard) {
        --woh-topbar-height: 2.5rem;
    }

    .app-shell.has-app-nav:not(.is-add-hire-wizard) .app-topbar {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }

    .app-shell.has-app-nav:not(.is-add-hire-wizard) .app-topbar-org {
        font-size: 0.6875rem;
    }

    .app-shell.has-app-nav:not(.is-add-hire-wizard) .account-name,
    .app-shell.has-app-nav:not(.is-add-hire-wizard) .account-menu > summary .bi-chevron-down {
        display: none;
    }

    .app-shell.has-app-nav:not(.is-add-hire-wizard) .account-menu > summary {
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        justify-content: center;
        gap: 0;
    }

    .app-shell.has-app-nav:not(.is-add-hire-wizard) .account-avatar {
        margin: 0;
        line-height: 1;
    }

    .app-shell.has-app-nav:not(.is-add-hire-wizard) .app-content {
        padding: 0.55rem 0.85rem calc(1rem + var(--woh-mobile-bar));
    }

    .app-shell.has-app-nav:not(.is-add-hire-wizard) .app-main {
        scroll-padding-bottom: calc(var(--woh-mobile-bar) + 1.25rem);
        scroll-padding-top: 0.5rem;
    }

    .app-shell.has-app-nav:not(.is-add-hire-wizard) .form-control,
    .app-shell.has-app-nav:not(.is-add-hire-wizard) .form-select,
    .app-shell.has-app-nav:not(.is-add-hire-wizard) textarea.form-control,
    .hire-filter-search {
        font-size: 1rem;
    }

    .dashboard-page-header,
    .hires-page-header .page-header-actions {
        display: none;
    }

    .dashboard-kpi {
        padding: 0.7rem 0.75rem 0.75rem;
    }

    .dashboard-kpi-label {
        margin-bottom: 0.15rem;
        font-size: 0.75rem;
    }

    .dashboard-kpi-value {
        font-size: 1.25rem;
    }

    .dashboard-approx-note {
        margin: -0.15rem 0 0.45rem;
        font-size: 0.6875rem;
        line-height: 1.35;
    }

    .setup-banner {
        margin-bottom: 0.45rem;
        min-height: 2.75rem;
        padding: 0.5rem 0.75rem;
    }

    .setup-banner p,
    .setup-banner-link,
    .setup-banner-dismiss {
        font-size: 0.8125rem;
    }

    .dashboard-hire-row {
        padding: 0.65rem 0.75rem;
        gap: 0.35rem;
    }

    .dashboard-up-next {
        padding: 0.55rem 0.75rem;
    }

    .app-shell.has-app-nav .app-content .collection-page:not(.hires-list-page) .page-header-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .app-shell.has-app-nav .app-content .collection-page:not(.hires-list-page) .page-header-actions {
        width: auto;
        flex: 0 0 auto;
    }

    .app-shell.has-app-nav .app-content .collection-page:not(.hires-list-page) .page-header-actions .btn {
        width: auto;
        min-height: 2.25rem;
        padding: 0 0.75rem;
    }

    .app-shell.has-app-nav .app-content .hires-page-header {
        margin-bottom: 0.35rem;
    }

    .app-shell.has-app-nav .app-content .hires-page-header .page-title {
        font-size: 1.2rem;
    }

    .hire-filter-chips {
        gap: 0.3rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .hire-filter-chips .filter-chip {
        flex: 0 0 auto;
    }

    .collection-page .cards-mobile .clickable-card {
        padding: 0.65rem 0.9rem;
        gap: 0.3rem;
    }

    .collection-page .cards-mobile .clickable-card-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .collection-page .cards-mobile .status-badge {
        align-self: flex-start;
        width: max-content;
        max-width: 100%;
        font-size: 0.625rem;
    }

    .collection-page .cards-mobile .clickable-card-stats-secondary {
        font-size: 0.6875rem;
    }

    .collection-page .cards-mobile .status-flags {
        margin-top: -0.05rem;
    }

    .collection-page .cards-mobile .status-flags .status-badge {
        font-size: 0.625rem;
    }

    .app-shell.has-app-nav .app-content .product-page-header .page-header-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.35rem 0.75rem;
    }

    .app-shell.has-app-nav .app-content .product-page-header .page-header-actions {
        width: auto;
        margin-left: auto;
    }

    .app-shell.has-app-nav .app-content .product-page-header .page-header-actions .btn,
    .app-shell.has-app-nav .app-content .product-page-header .page-header-quiet-actions .panel-action {
        width: auto;
        min-height: auto;
    }

    .row-quiet-actions {
        gap: 0.5rem 1rem;
    }

    .attention-hire-preview,
    .hire-card-actions {
        margin-top: 0.2rem;
        gap: 0.4rem;
        flex-wrap: nowrap;
        justify-content: flex-end;
        margin-left: auto;
    }

    .attention-hire-preview .hire-extend-action,
    .hire-card-actions .hire-extend-action {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
    }

    .page-detail .page-header-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
    }

    .page-detail .page-header-actions .btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        min-height: var(--woh-control-height);
    }

    .page-detail .page-header-actions .btn-primary,
    .page-detail .page-header-actions .btn-danger {
        flex: 1 1 100%;
        order: -1;
        width: 100%;
    }

    .page-detail .page-header-actions .overflow-menu {
        flex: 0 0 var(--woh-control-height);
        order: 1;
    }

    .page-detail .page-header-quiet-actions {
        justify-content: flex-start;
    }

    .page-detail .page-back {
        margin-bottom: 0.25rem;
    }

    .reports-page .page-header,
    .settings-page .page-header {
        margin-bottom: 0.4rem;
    }

    .field-home-cta {
        min-height: 2.75rem;
    }

    html.is-keyboard-open .app-shell.has-app-nav:not(.is-add-hire-wizard) .app-mobile-bottom,
    html.is-keyboard-open .app-shell.has-app-nav:not(.is-add-hire-wizard) .mobile-more-backdrop,
    html.is-keyboard-open .app-shell.has-app-nav:not(.is-add-hire-wizard) .mobile-more-sheet,
    html.is-keyboard-open .form-sticky-actions {
        display: none !important;
    }

    html.is-keyboard-open .app-shell.has-app-nav:not(.is-add-hire-wizard) .app-content {
        padding-bottom: 1rem;
    }
}

.auth-cookie {
    margin: 1.25rem 0 0;
}

.auth-cookie-settings {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    cursor: pointer;
}

.auth-cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    padding: 0.85rem 1.15rem;
    background: #faf8f4;
    color: #14161a;
    box-shadow: 0 -1px 0 rgba(20, 22, 26, 0.08);
}

.auth-cookie-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    max-width: 52rem;
    margin: 0 auto;
}

.auth-cookie-banner-copy p {
    margin: 0;
    color: #5b5f66;
    font-size: 0.875rem;
    line-height: 1.4;
}

.auth-cookie-banner-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .auth-cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .auth-cookie-banner-actions .btn {
        flex: 1 1 0;
    }
}

.kit-avatar {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
    cursor: pointer;
}

.kit-avatar-lg {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.125rem;
}

.kit-avatar-xs {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.62rem;
}

.kit-avatar-thumb {
    border-radius: 0.4rem;
}

.kit-avatar-lg.kit-avatar-thumb {
    border-radius: 0.45rem;
}

.kit-avatar.is-muted,
.kit-avatar.is-icon {
    background: #e7eaee;
    color: #6b7280;
}

.kit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kit-avatar.is-icon img,
.kit-lightbox-icon {
    object-fit: contain;
    padding: 0.2rem;
    background: #fff;
}

.kit-lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.72);
}

.kit-lightbox img,
.kit-lightbox-initials {
    max-width: min(42rem, 100%);
    max-height: 70vh;
    border-radius: 1rem;
}

.kit-lightbox-initials {
    display: grid;
    place-items: center;
    width: 12rem;
    height: 12rem;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
}

.kit-lightbox p,
.kit-lightbox-close,
.kit-lightbox-meta {
    color: #fff;
    margin: 0;
}

.kit-lightbox-caption {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    text-align: center;
}

.kit-lightbox-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.kit-lightbox-actions .btn {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    background: transparent;
}

.kit-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: 0;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
}

.visual-photos-row,
.record-face {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.visual-photo-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.65rem;
}

.visual-photos .kit-avatar-lg,
.visual-photo-square {
    width: 4.25rem;
    height: 4.25rem;
}

.visual-photos .kit-avatar-lg.kit-avatar-thumb {
    border: 1px solid var(--woh-line, #d7dee8);
    border-radius: 0.45rem;
}

.visual-photo-square {
    display: block;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--woh-line, #d7dee8);
    border-radius: 0.45rem;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}

.visual-photo-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual-photo-bin {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    border: 1px solid var(--woh-line, #d7dee8);
    border-radius: 999px;
    background: #fff;
    color: var(--woh-muted, #5c6b7a);
    line-height: 1;
}

.visual-photo-kind {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--woh-muted, #5c6b7a);
}

.visual-photo-meta,
.visual-photo-actions {
    font-size: 0.75rem;
    color: var(--woh-muted, #5c6b7a);
    text-align: center;
}

.visual-photo-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem 0.35rem;
}

.visual-photo-actions .btn {
    padding: 0;
    font-size: inherit;
}

.visual-photos-empty {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.visual-photo-delete {
    color: var(--woh-muted, #5c6b7a);
}

.kit-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    padding: 0 0.75rem;
}

.kit-lightbox-nav.is-prev {
    left: 0.25rem;
}

.kit-lightbox-nav.is-next {
    right: 0.25rem;
}

.owned-kit-table {
    table-layout: fixed;
    width: 100%;
}

.owned-kit-col-plant {
    width: 8.5rem;
}

.owned-kit-col-name {
    width: 26%;
}

.owned-kit-col-owner {
    width: 26%;
}

.owned-kit-col-type {
    width: 22%;
}

.owned-kit-col-actions {
    width: 5.5rem;
}

.owned-kit-table .record-row-actions,
.owned-kit-table thead th.col-actions {
    width: 5.5rem;
    min-width: 0;
}

.sites-board-host {
    display: block;
    margin-bottom: 1rem;
    min-width: 0;
    overflow-x: auto;
}

.dashboard-page-header {
    margin-bottom: 0.65rem;
}

.dashboard-page-header .page-header-row {
    flex-direction: row;
    align-items: center;
    gap: 0.65rem 1rem;
}

.dashboard-page-header .page-title-row {
    flex-wrap: nowrap;
}

.dashboard-page-header .page-header-actions {
    width: auto;
    align-items: center;
    flex-wrap: nowrap;
}

.dashboard-page-header .page-header-actions .btn {
    flex: 0 0 auto;
    min-height: 2.25rem;
}

.dash-reviews {
    white-space: nowrap;
}

.dashboard-page .dash-stats {
    margin-bottom: 0.65rem;
    flex-shrink: 0;
    overflow: visible;
    min-height: min-content;
}

.dashboard-page .dash-stats .dash-stat-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dashboard-page .dash-stats .dashboard-kpi {
    min-height: 4.25rem;
    max-height: none;
    padding: 0.35rem 0.7rem 0.4rem;
    overflow: visible;
    flex-shrink: 0;
}

.dashboard-page .dash-stats .dashboard-kpi-label {
    margin-bottom: 0.1rem;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
}

.dashboard-page .dash-stats .dashboard-kpi-value {
    font-size: 1.375rem;
    line-height: 1.15;
    overflow: visible;
}

.app-main:has(.dashboard-page),
.app-main:has(.dashboard-page.is-board-view) {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.app-main:has(.dashboard-page.is-board-view) .app-content {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
    max-width: none;
    overflow: visible;
}

.dashboard-page.is-board-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: min-content;
    overflow: visible;
    padding-bottom: 0;
}

.dashboard-page .dash-stats,
.dashboard-page .getting-started,
.dashboard-page .getting-started-strip,
.dashboard-page .setup-banner,
.dashboard-page .dash-guide-restore {
    flex-shrink: 0;
}

.dashboard-page .dash-stats .dashboard-kpi {
    max-height: none;
    min-height: auto;
}

.disclosure-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--woh-orange);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

.disclosure-link.is-open {
    margin-bottom: 0.75rem;
}

.disclosure-link:hover,
.disclosure-link:focus-visible {
    text-decoration: underline;
}

.disclosure-link .bi {
    transition: transform 0.15s ease;
}

.disclosure-link.is-open .bi {
    transform: rotate(90deg);
}

.learn-more {
    color: var(--woh-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    text-decoration: none;
}

.learn-more:hover,
.learn-more:focus-visible {
    text-decoration: underline;
}

.getting-started-strip .getting-started-next {
    border: 0;
    background: none;
    padding: 0;
    color: var(--woh-orange);
    font: inherit;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.getting-started-strip .getting-started-next:hover,
.getting-started-strip .getting-started-next:focus-visible {
    text-decoration: underline;
}

.dash-switch {
    display: inline-flex;
    gap: 0.15rem;
    margin: 0;
    padding: 0.15rem;
    border: 1px solid var(--woh-line);
    border-radius: 999px;
    background: #fff;
}

.dash-switch-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--woh-ink);
    font-size: 0.85rem;
    font-weight: 650;
    line-height: 1;
    padding: 0.4rem 0.75rem;
}

.dash-switch-option.is-active {
    background: var(--woh-ink);
    color: #fff;
}

.dash-switch-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--woh-danger, #c5362b);
    color: #fff;
    font-size: 0.72rem;
}

.dash-switch-option.is-active .dash-switch-count {
    background: #fff;
    color: var(--woh-danger, #c5362b);
}

.dash-clear {
    margin: 0;
    border: 0;
    background: transparent;
    color: #5c6b7a;
    font-size: 0.82rem;
    font-weight: 650;
    padding: 0;
}

.dashboard-page .dash-invite {
    height: 40px;
    min-height: 40px;
    margin-bottom: 0.65rem;
    padding: 0.15rem 0.75rem;
}

.dash-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 40px;
    min-height: 40px;
    margin: 0 0 0.65rem;
    box-sizing: border-box;
}

.dash-controls-start {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.dash-controls .home-stopped-chip {
    margin: 0;
}

.dash-board-jump {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.dash-board-view .site-map-bar {
    min-height: 40px;
    margin: 0 0 0.65rem;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.dash-board-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.dash-board-view .sites-board-host,
.dash-board-view .site-map-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    overflow: visible;
}

.board-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    min-height: 360px;
    border-radius: 1.25rem;
    overflow: visible;
    background-color: #ebe6df;
    background-image:
        linear-gradient(rgba(120, 108, 96, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 108, 96, 0.14) 1px, transparent 1px);
    background-size: 32px 32px;
}

.board-stage.is-scroll {
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
}

.board-fit {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.site-map-wrap > .board-legend {
    position: static;
    left: auto;
    bottom: auto;
    z-index: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
    margin: 0.35rem 0 0;
    padding: 0;
    line-height: 1.2;
}

.site-map.board-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: none;
    transform: none;
}

.site-isle,
.site-plot {
    box-sizing: border-box;
}

.site-isle,
.site-plot {
    z-index: 1;
}

.site-isle.is-raised,
.site-plot.is-raised {
    z-index: 6;
}

.site-isle:hover,
.site-isle:focus-within,
.site-plot:hover,
.site-plot:focus-within {
    z-index: 9;
}

.site-map .site-isle-name,
.site-map .site-isle-chip {
    max-width: none;
    overflow: visible;
    white-space: nowrap;
}

.dash-board-link {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
}

.dash-board-link .panel-action,
.home-all-clear .panel-action {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.dash-action-view {
    container-type: inline-size;
    container-name: needs-action;
    min-width: 0;
    width: 100%;
}

.dash-action-view .dashboard-hire-list {
    width: 100%;
    min-width: 0;
}

.dash-action-view .is-action-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon identity"
        "meta meta"
        "days cost"
        "actions actions"
        "alert alert";
    justify-content: stretch;
    align-items: center;
    column-gap: 0.65rem;
    row-gap: 0.35rem;
}

.dash-action-view .is-action-list > * {
    min-width: 0;
}

.dash-action-view .is-action-list .dashboard-hire-row-icon {
    grid-area: icon;
}

.dash-action-view .is-action-list .dashboard-hire-row-icon .kit-avatar {
    width: 32px;
    height: 32px;
}

.dash-action-view .is-action-list .dashboard-hire-row-identity {
    grid-area: identity;
}

.dash-action-view .is-action-list .dashboard-hire-row-heading {
    margin: 0;
    min-width: 0;
    flex-wrap: wrap;
}

.dash-action-view .is-action-list .dashboard-hire-row-name {
    min-width: 0;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    overflow-wrap: break-word;
}

.dash-action-view .is-action-list .dashboard-hire-row-meta {
    grid-area: meta;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
}

.dash-action-view .is-action-list .dashboard-hire-row-days {
    grid-area: days;
    text-align: left;
}

.dash-action-view .is-action-list .dashboard-hire-row-cost-cell {
    grid-area: cost;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    text-align: left;
}

.dash-action-view .is-action-list .dashboard-hire-row-cost {
    font-variant-numeric: tabular-nums;
    white-space: normal;
}

.dash-action-view .is-action-list .dashboard-hire-row-cost-cell .dashboard-hire-row-detail {
    text-align: inherit;
    overflow-wrap: break-word;
}

.dash-action-view .is-action-list:not(.has-actions) .dashboard-hire-row-actions {
    display: none;
}

.dash-action-view .is-action-list .dashboard-hire-row-actions {
    grid-area: actions;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.dash-action-view .is-action-list .dashboard-hire-row-actions .btn-row-action,
.dash-action-view .is-action-list .dashboard-hire-row-actions .hire-extend-action {
    min-height: 2.5rem;
}

.dash-action-view .is-action-list .dashboard-hire-row-alert {
    grid-area: alert;
    width: 100%;
}

@container needs-action (min-width: 700px) {
    .dash-action-view .dashboard-hire-list {
        display: grid;
        grid-template-columns: 2rem minmax(0, 2fr) minmax(0, 1.5fr) minmax(5.5rem, 0.7fr) minmax(9rem, 1fr) max-content;
        column-gap: 1.5rem;
        justify-content: stretch;
    }

    .dash-action-view .is-action-list {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        grid-template-areas: none;
        column-gap: inherit;
        align-items: center;
        row-gap: 0.2rem;
    }

    .dash-action-view .is-action-list > * {
        grid-area: auto;
    }

    .dash-action-view .is-action-list .dashboard-hire-row-icon { grid-column: 1; }
    .dash-action-view .is-action-list .dashboard-hire-row-identity { grid-column: 2; }
    .dash-action-view .is-action-list .dashboard-hire-row-meta { grid-column: 3; text-align: left; }
    .dash-action-view .is-action-list .dashboard-hire-row-days { grid-column: 4; text-align: left; }
    .dash-action-view .is-action-list .dashboard-hire-row-cost-cell {
        grid-column: 5;
        align-items: flex-end;
        text-align: right;
    }
    .dash-action-view .is-action-list .dashboard-hire-row-actions { grid-column: 6; }

    .dash-action-view .is-action-list .dashboard-hire-row-cost {
        white-space: nowrap;
    }

    .dash-action-view .is-action-list .dashboard-hire-row-actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
        width: 100%;
        justify-self: stretch;
    }

    .dash-action-view .is-action-list .dashboard-hire-row-actions .btn-row-action,
    .dash-action-view .is-action-list .dashboard-hire-row-actions .hire-extend-action {
        min-height: var(--woh-btn-height, 1.85rem);
    }

    .dash-action-view .is-action-list .dashboard-hire-row-alert {
        grid-column: 1 / -1;
    }
}

.dash-board-view.is-hidden {
    display: none;
}

@media (min-width: 1000px) {
    .dash-action-view.is-hidden-wide,
    .dash-controls.is-hidden-wide {
        display: none;
    }
}

@media (max-width: 999.98px) {
    .dashboard-page .dash-stats .dash-stat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-page .dash-stats .dashboard-kpi {
        max-height: none;
    }

    .dash-switch-board,
    .dash-board-view,
    .dash-board-jump {
        display: none;
    }

    .dash-action-view {
        display: block;
    }
}

.home-stage {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.home-stage.is-clear .sites-board-host {
    width: 100%;
}

.home-all-clear {
    margin: 0;
    color: var(--woh-muted);
    font-size: 0.85rem;
    font-weight: 650;
}

.home-attention {
    min-width: 0;
}

.home-attention .dashboard-hire-list {
    max-height: none;
}

.home-attention-row:nth-child(n + 4) {
    display: none;
}

.home-attention-row.is-linked .dashboard-hire-row {
    background: rgba(232, 78, 22, 0.08);
    box-shadow: inset 3px 0 0 var(--woh-orange);
}

.home-stopped-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--woh-line);
    border-radius: 999px;
    background: #fff;
    color: var(--woh-ink);
    font-size: 0.82rem;
    font-weight: 650;
}

.site-tile.is-glow {
    outline: 3px solid var(--woh-orange);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(232, 78, 22, 0.28);
    border-radius: 0.7rem;
    z-index: 2;
}

@media (min-width: 1280px) {
    .home-stage:not(.is-clear) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        align-items: start;
        gap: 1rem;
    }

    .home-attention {
        position: sticky;
        top: 0.75rem;
        order: 2;
        max-height: 60vh;
        overflow: auto;
    }

    .home-stage .sites-board-host {
        order: 1;
        margin-bottom: 0;
    }

    .home-attention-row:nth-child(n + 4) {
        display: block;
    }

    .home-see-all-narrow {
        display: none;
    }
}

.home-board-filters {
    display: none;
}

@media (min-width: 992px) {
    .dashboard-page.has-home-board .home-list-kpis {
        display: none;
    }

    .dashboard-page.has-home-board .home-board-filters {
        display: block;
    }
}

@media (max-width: 991.98px) {
    .sites-board-host {
        display: none;
    }
}

.product-avatar-picker {
    margin-bottom: 1.25rem;
}

.product-avatar-current {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.product-avatar-current img,
.product-avatar-choice img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 0.55rem;
    background: #e7edf1;
}

.product-avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.product-avatar-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    width: 4.6rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--woh-ink);
    font-size: 0.68rem;
    padding: 0.3rem;
}

.product-avatar-choice.is-selected {
    border-color: var(--woh-orange);
    background: var(--woh-orange-soft);
}

.site-map-wrap {
    position: relative;
}

.site-map-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    min-height: 40px;
    margin: 0 0 0.65rem;
}

.site-map-bar-start,
.site-map-bar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-height: 2.25rem;
}

.site-map-bar-end {
    margin-left: auto;
}

.site-map-bar button {
    border: 1px solid var(--woh-line);
    background: #fff;
    border-radius: 999px;
    color: var(--woh-ink);
    font-size: 0.85rem;
    font-weight: 650;
    line-height: 1;
    padding: 0.4rem 0.75rem;
}

.site-map-bar button.is-on {
    background: var(--woh-ink);
    border-color: var(--woh-ink);
    color: #fff;
}

.site-map-bar button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.site-map-bar button:focus-visible {
    outline: 2px solid var(--woh-orange);
    outline-offset: 2px;
}

.site-map-bar button.site-map-arrange.is-save,
.site-map-bar button.site-map-arrange.is-saved {
    background: var(--woh-orange);
    border-color: var(--woh-orange);
    color: #fff;
}

.site-map-bar button.site-map-arrange.is-save:hover,
.site-map-bar button.site-map-arrange.is-saved:hover {
    background: var(--woh-orange-hover);
    border-color: var(--woh-orange-hover);
}

.site-map-bar button.site-map-quiet.is-pressed {
    background: var(--woh-orange-soft);
    border-color: var(--woh-orange);
    color: var(--woh-ink);
}

.type-owned-only {
    margin-left: 0.35rem;
    color: var(--woh-muted);
    font-size: 0.75rem;
    font-weight: 650;
}

.site-map-hint,
.site-map-reset-confirm {
    color: var(--woh-muted);
    font-size: 0.82rem;
    font-weight: 500;
}

.site-map-bar .site-map-clear,
.site-map-bar .site-map-reset {
    border-color: transparent;
    background: transparent;
    color: #5c6b7a;
    font-weight: 450;
}

.site-map-bar .site-map-reset {
    margin-left: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.2rem 0.15rem;
}

.site-map-empty {
    position: absolute;
    left: 50%;
    top: 42%;
    margin: 0;
    color: #5c6b7a;
    font-size: 0.95rem;
    font-weight: 650;
    transform: translate(-50%, -50%);
}

@media (min-width: 992px) {
    .sites-toolbar.filter-bar {
        align-items: end;
    }

    .sites-toolbar .filter-bar-view,
    .sites-toolbar .list-search {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 0.35rem;
    }

    .sites-toolbar .form-label {
        margin: 0;
        line-height: 1.2;
    }

    .sites-toolbar .filter-chips,
    .sites-toolbar .list-search .form-control {
        min-height: 2.25rem;
    }
}

.site-map-tools {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-map-reset {
    border: 0;
    background: transparent;
    color: #5c6b7a;
    font-size: 0.82rem;
    font-weight: 450;
    text-decoration: none;
}

.site-map-reset:hover,
.site-map-reset:focus-visible {
    color: #243140;
    text-decoration: underline;
    text-underline-offset: 0.15rem;
}

.site-map-note {
    color: #243140;
    font-size: 0.82rem;
    font-weight: 650;
}

.site-map-note.is-fading {
    animation: site-note-fade 0.4s ease 2s forwards;
}

.site-map-note.is-error {
    color: #8a3a12;
}

.site-map {
    position: relative;
    height: 46rem;
    min-height: 40rem;
    border-radius: 1.25rem;
    overflow: visible;
    background-color: #ebe6df;
    background-image:
        linear-gradient(rgba(120, 108, 96, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 108, 96, 0.14) 1px, transparent 1px);
    background-size: 32px 32px;
    user-select: none;
}

.site-map.board-canvas {
    min-height: 0;
}

.site-map-legend {
    position: absolute;
    left: 0.9rem;
    bottom: 0.75rem;
    z-index: 5;
    display: flex;
    gap: 0.85rem;
    margin: 0;
    color: #243140;
    font-size: 0.75rem;
    font-weight: 650;
}

.site-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.site-map-legend span::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.2rem;
    background: #fff;
}

.site-map-legend .is-hire::before {
    border: 2px solid #e84e16;
}

.site-map-legend .is-owned::before {
    border: 2px solid #1b3354;
}

.site-map-legend .is-late::before {
    content: "!";
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #c5362b;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding-bottom: 0px;
}

.site-isle,
.site-plot {
    position: absolute;
    width: max-content;
    max-width: none;
    color: #1c2430;
    text-align: center;
    transform: scale(var(--s, 1));
    transform-origin: top left;
    cursor: pointer;
    touch-action: auto;
    user-select: none;
}

/* The layout box is the blob's bounding rectangle. Only the shape, tiles and name should take a click or a drop. */
.site-isle,
.site-isle-float,
.site-isle-shape,
.site-blob {
    pointer-events: none;
}

/* left/top are written by placeBoard after measure. Hold that paint so blobs do not draw in the corner. */
.site-map.board-canvas:not(.is-flow) > [data-island]:not([style*="left:"]) {
    visibility: hidden;
}

.site-map.board-canvas:not(.is-flow):has([data-island][style*="left:"]) > .board-placing {
    display: none;
}

.site-map.board-canvas:not(.is-flow) > [data-island]:not([data-placed]) .site-isle-float,
.site-map.board-canvas:not(.is-flow) > [data-island]:not([data-placed]) .site-tile,
.site-map.board-canvas:not(.is-flow) > [data-island]:not([data-placed]) .site-tile-alert {
    animation: none;
}

.site-map.is-arranged .site-isle,
.site-map.is-arranged .site-plot {
    cursor: grab;
    touch-action: none;
}

.site-isle-float {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: site-in 220ms ease backwards, site-bob var(--bob, 7s) ease-in-out var(--delay, 0s) infinite;
    animation-delay: var(--in, 0s), var(--delay, 0s);
}

.site-plot .site-isle-float {
    animation: site-in 220ms ease backwards;
    animation-delay: var(--in, 0s);
}

.site-isle.is-dragging,
.site-plot.is-dragging {
    z-index: 7;
    cursor: grabbing;
}

.site-isle.is-dragging .site-isle-float,
.site-plot.is-dragging .site-isle-float {
    animation: none;
}

.site-isle.is-dimmed,
.site-plot.is-dimmed {
    opacity: 0.28;
}

.site-isle-shape {
    position: relative;
    width: var(--blob-w);
    height: var(--blob-h);
    overflow: visible;
}

.site-blob {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 10px 18px rgba(28, 42, 56, 0.1));
    transition: filter 200ms ease, transform 200ms ease;
}

.site-isle:hover .site-blob,
.site-isle:focus-within .site-blob {
    filter: drop-shadow(0 16px 26px rgba(28, 42, 56, 0.16));
    transform: translateY(-2px);
}

.site-isle.is-dragging .site-blob {
    filter: drop-shadow(0 22px 34px rgba(28, 42, 56, 0.24));
    transform: translateY(-4px);
}

.site-isle-open {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: grab;
    pointer-events: auto;
    clip-path: var(--blob-clip);
}

.site-isle.is-dragging .site-isle-open,
.site-plot.is-dragging .site-plot-hit {
    cursor: grabbing;
}

.site-isle-open:focus-visible {
    outline: 2px solid var(--woh-orange);
    outline-offset: 3px;
}

.site-isle-body {
    position: absolute;
    left: var(--cx);
    top: var(--cy);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--content-w);
    height: var(--content-h);
    overflow: visible;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.site-isle-counts {
    margin: 0 0 6px;
    color: #3d4a59;
    font-size: 12px;
    line-height: 1.2;
    pointer-events: none;
}

.site-isle-tiles {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), 78px);
    gap: 8px;
    justify-content: center;
    overflow: visible;
    pointer-events: none;
}

.site-tile {
    position: relative;
    z-index: 5;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 78px;
    overflow: visible;
    color: #1c2430;
    font-size: 12px;
    text-decoration: none;
    animation: tile-pop 180ms ease backwards;
    animation-delay: calc(var(--in, 0s) + 80ms);
    transition: scale 200ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

.site-tile:hover,
.site-tile:focus-visible {
    z-index: 6;
    scale: 1.08;
    outline: none;
}

.site-thumb-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: visible;
}

.site-thumb {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 10px;
    background: #e7edf1;
    box-shadow: 0 0 0 2px transparent;
}

.site-tile.is-hire .site-thumb {
    box-shadow: 0 0 0 2px #e84e16;
}

.site-tile.is-owned .site-thumb {
    box-shadow: 0 0 0 2px #1b3354;
}

.site-tile.is-pending .site-thumb {
    box-shadow: none;
    outline: 2px dashed #8aa0b5;
    outline-offset: 3px;
    background: #f4f7f9;
}

.site-tile-pending {
    display: -webkit-box;
    width: 78px;
    max-width: 78px;
    margin-top: 2px;
    overflow: hidden;
    color: #5c6b7a;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.site-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-tile-name {
    display: -webkit-box;
    width: 78px;
    max-width: 78px;
    margin-top: 4px;
    overflow: hidden;
    color: #243140;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.site-tile-more .site-thumb {
    color: #243140;
    font-size: 0.85rem;
    font-weight: 750;
}

.site-tile-alert {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #c5362b;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    animation: site-alert 1.6s ease-in-out infinite;
}

button.site-tile-alert {
    padding: 0;
    cursor: pointer;
}

.attention-panel {
    position: fixed;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 16px));
    max-height: 60vh;
    overflow: hidden;
    visibility: hidden;
    background: #fff;
    border: 1px solid var(--woh-line);
    border-radius: 0.85rem;
    box-shadow: 0 16px 40px rgba(17, 19, 24, 0.16);
}

.attention-panel.is-placed {
    visibility: visible;
}

.attention-panel:focus {
    outline: none;
}

.attention-panel.is-quiet-focus:focus,
.attention-panel.is-quiet-focus:focus-visible {
    outline: none;
}

.attention-panel:focus-visible {
    outline: 2px solid var(--woh-orange);
    outline-offset: 2px;
}

.attention-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.55rem 0.9rem;
    border-bottom: 1px solid var(--woh-line);
}

.attention-panel-head h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 750;
}

.attention-panel-close {
    border: 0;
    background: transparent;
    color: var(--woh-muted);
    line-height: 1;
    padding: 0.2rem;
}

.attention-panel-body {
    overflow: auto;
    min-height: 0;
}

.attention-panel-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 0.75rem;
    align-items: start;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--woh-line);
}

.attention-panel-row:last-child {
    border-bottom: 0;
}

.attention-panel-row:hover {
    background: rgba(20, 22, 26, 0.04);
}

.attention-panel-row-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.attention-panel-row-name {
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.attention-panel-row-meta {
    color: var(--woh-ink-soft, #5c6570);
    font-size: 0.78rem;
    font-weight: 450;
    line-height: 1.35;
}

.attention-panel-foot {
    border-top: 1px solid var(--woh-line);
    padding: 0.55rem 0.85rem 0.65rem;
}

.attention-panel-see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
}

.attention-panel-row-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.attention-panel-row-actions .btn {
    white-space: nowrap;
}

@media (max-width: 999.98px) {
    .attention-panel {
        display: none;
    }
}

.site-tile-pop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.35rem);
    z-index: 20;
    display: none;
    width: max-content;
    max-width: 14rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.55rem;
    background: #1c2430;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: left;
    transform: translateX(-50%);
    pointer-events: none;
}

.site-tile-pop strong,
.site-tile-pop span {
    display: block;
}

.site-tile:hover .site-tile-pop,
.site-tile:focus-visible .site-tile-pop {
    display: block;
}

.site-isle-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    max-width: none;
    margin: 2px 0 0;
    overflow: visible;
    color: #1c2430;
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: clip;
    text-decoration: none;
    pointer-events: auto;
}

.site-isle-name:hover,
.site-isle-name:focus-visible {
    text-decoration: underline;
}

.site-isle-chip {
    display: inline-block;
    max-width: none;
    margin: 6px 0 0;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #f4e2c4;
    color: #6a4a12;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    pointer-events: auto;
}

.site-plot-hit {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.site-plot-mark {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border: 1.5px dashed #8b97a3;
    border-radius: 1.1rem;
    background: transparent;
    color: #5c6b7a;
    font-size: 1.15rem;
}

.site-plot-plus,
.site-plot-add {
    display: none;
}

.site-plot-hit:hover .site-plot-pin,
.site-plot-hit:focus-visible .site-plot-pin {
    display: none;
}

.site-plot-hit:hover .site-plot-plus,
.site-plot-hit:focus-visible .site-plot-plus,
.site-plot-hit:hover .site-plot-add,
.site-plot-hit:focus-visible .site-plot-add {
    display: block;
}

.site-plot-add {
    margin-top: 0.25rem;
    color: #243140;
    font-size: 0.72rem;
    font-weight: 650;
}

.site-plot .site-isle-name {
    max-width: none;
    color: #4d5b6a;
    font-size: 0.8rem;
    font-weight: 650;
}

.site-plot-hit:focus-visible .site-plot-mark {
    outline: 2px solid var(--woh-orange);
    outline-offset: 3px;
}

@keyframes site-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -3.5px; }
}

@keyframes site-in {
    from { opacity: 0; scale: 0.92; }
    to { opacity: 1; scale: 1; }
}

@keyframes tile-pop {
    from { opacity: 0; scale: 0.84; }
    to { opacity: 1; scale: 1; }
}

@keyframes site-alert {
    0%, 100% { scale: 1; }
    50% { scale: 1.12; }
}

@keyframes site-note-fade {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .site-isle-float,
    .site-plot .site-isle-float,
    .site-tile,
    .site-tile-alert,
    .site-blob,
    .site-map-note {
        animation: none;
        transition: none;
    }
}

.site-map-bar-find {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.board-find-wrap {
    position: relative;
    display: block;
    width: min(100%, 18rem);
    margin: 0;
}

.board-find-wrap .bi-search {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    color: var(--woh-muted);
    font-size: 0.85rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.board-find {
    width: 100%;
    height: 2.25rem;
    padding: 0.35rem 0.8rem 0.35rem 2.1rem;
    border: 1px solid var(--woh-line);
    border-radius: 999px;
    background: #fff;
    color: var(--woh-ink);
    font: inherit;
    font-size: 0.85rem;
}

.board-find-count {
    color: var(--woh-muted);
    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
}

.site-map-move-hint {
    color: var(--woh-muted);
    font-size: 0.82rem;
}

@media (max-width: 1399.98px) {
    .site-map-move-hint {
        display: none;
    }

    .dash-board-view .site-map-bar,
    .dash-board-view .site-map-bar-start,
    .dash-board-view .site-map-bar-end {
        flex-wrap: nowrap;
    }
}

button.site-tile,
button.site-isle-name,
button.site-isle-open {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

button.site-isle-name {
    display: inline-flex;
}

.site-tile-count {
    position: absolute;
    right: -6px;
    bottom: -4px;
    z-index: 4;
    min-width: 1.35rem;
    padding: 0.05rem 0.28rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #1c2430;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
}

.site-tile.is-hire .site-tile-count {
    background: #e84e16;
}

.site-tile.is-owned .site-tile-count {
    background: #1b3354;
}

.site-blob-target {
    display: none;
    stroke: var(--woh-orange);
    stroke-width: 2.6;
    stroke-dasharray: 7 5;
    pointer-events: none;
}

.site-map.is-moving-kit .is-target .site-blob-target {
    display: block;
}

.site-map.is-moving-kit .is-target-hover .site-blob-target,
.site-map.is-moving-kit .is-target:hover .site-blob-target {
    stroke-dasharray: none;
    stroke-width: 3;
}

.site-map.is-moving-kit .is-target-hover .site-blob,
.site-map.is-moving-kit .is-target:hover .site-blob {
    transform: scale(1.03);
    transform-origin: center;
    transform-box: fill-box;
}

.site-map.is-moving-kit .site-plot.is-target .site-plot-mark {
    border-color: var(--woh-orange);
    border-width: 2px;
}

.site-map.is-moving-kit .site-plot.is-target-hover .site-plot-mark,
.site-map.is-moving-kit .site-plot.is-target:hover .site-plot-mark {
    border-style: solid;
    transform: scale(1.04);
}

.site-map.is-moving-kit .is-not-target {
    opacity: 0.3;
}

/* Kit drag is marked on body so a board re-render cannot clear it.
   Tile hover events would otherwise queue ahead of the drop and redraw the open site panel each time. */
body.is-kit-drag .site-tile,
body.is-kit-drag .site-plot-hit,
body.is-kit-drag .board-kit-row,
body.is-kit-drag .board-kit-move {
    pointer-events: none;
}

/* The blob box catches a drop on a tile. Tiles themselves stay inert so they do not ping the server. */
body.is-kit-drag [data-island][data-drop] .site-isle-shape,
body.is-kit-drag [data-island][data-drop].site-plot {
    pointer-events: auto;
}

body.is-kit-drag .board-site-panel {
    visibility: hidden;
    pointer-events: none;
}

body.is-kit-drag [data-island][data-drop="1"] .site-blob-target {
    display: block;
}

body.is-kit-drag [data-island][data-drop-hover="1"] .site-blob-target,
body.is-kit-drag [data-island][data-drop="1"]:hover .site-blob-target {
    stroke-dasharray: none;
    stroke-width: 3;
}

body.is-kit-drag [data-island][data-drop-hover="1"] .site-blob,
body.is-kit-drag [data-island][data-drop="1"]:hover .site-blob {
    transform: scale(1.03);
    transform-origin: center;
    transform-box: fill-box;
}

body.is-kit-drag .site-plot[data-drop="1"] .site-plot-mark {
    border-color: var(--woh-orange);
    border-width: 2px;
}

body.is-kit-drag .site-plot[data-drop-hover="1"] .site-plot-mark,
body.is-kit-drag .site-plot[data-drop="1"]:hover .site-plot-mark {
    border-style: solid;
    transform: scale(1.04);
}

body.is-kit-drag [data-island][data-drop="0"] {
    opacity: 0.3;
}

.board-site-panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: 372px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    border-left: 1px solid var(--woh-line);
    box-shadow: -12px 0 28px rgba(17, 19, 24, 0.08);
}

.board-stage.is-moving-kit .board-site-panel {
    visibility: hidden;
}

.board-site-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 0.9rem 0.35rem 1rem;
}

.board-site-panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 750;
}

.board-site-panel-meta {
    margin: 0.15rem 0 0.35rem;
    color: var(--woh-muted);
    font-size: 0.82rem;
}

.board-site-panel-tools {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.85rem;
    font-weight: 650;
}

.board-site-panel-tools a {
    color: var(--woh-orange);
    white-space: nowrap;
}

.board-site-panel-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--woh-ink);
    cursor: pointer;
}

.board-site-panel-hint {
    margin: 0;
    padding: 0.45rem 1rem;
    background: var(--woh-subtle);
    color: var(--woh-muted);
    font-size: 0.78rem;
}

.board-site-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.35rem 0 1rem;
}

.board-site-group.is-flash h3 {
    color: var(--woh-orange);
}

.board-preview {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 0;
    overflow: auto;
    padding: 0.2rem 1rem 1.1rem;
}

.board-preview-back,
.board-preview-close {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--woh-ink);
    font-weight: 700;
}

.board-preview-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.board-preview-identity h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.board-preview-face {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    overflow: hidden;
    border-radius: 0.9rem;
    background: #e7edf1;
    box-shadow: 0 0 0 2px #e84e16;
}

.board-preview-face.is-owned {
    box-shadow: 0 0 0 2px #1b3354;
}

.board-preview-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.board-preview-open {
    width: 100%;
}

.board-preview-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
    margin: 0;
}

.board-preview-facts div {
    min-width: 0;
}

.board-preview-facts dt {
    margin: 0;
    color: var(--woh-muted);
    font-size: 0.75rem;
    font-weight: 650;
}

.board-preview-facts dd {
    margin: 0.1rem 0 0;
    font-weight: 750;
}

.board-preview-facts .is-emphasis dd {
    color: #c5362b;
}

.board-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.board-site-group h3 {
    margin: 0.85rem 1rem 0.35rem;
    color: var(--woh-muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.board-kit-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.4rem 0.75rem 0.4rem 0.55rem;
}

.board-kit-row:hover {
    background: var(--woh-subtle);
}

.board-kit-handle {
    color: #9aa3ad;
    cursor: grab;
}

.board-kit-face {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 9px;
    background: #e7edf1;
    box-shadow: 0 0 0 2px #e84e16;
}

.board-kit-row.is-owned .board-kit-face {
    box-shadow: 0 0 0 2px #1b3354;
}

.board-kit-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.board-kit-copy {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.board-kit-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 700;
}

.board-kit-sub {
    display: block;
    overflow: hidden;
    color: var(--woh-muted);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-kit-late {
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: #f4e2c4;
    color: #6a4a12;
    font-size: 0.68rem;
    font-weight: 750;
}

.board-kit-move,
.board-kit-status {
    justify-self: end;
    font-size: 0.78rem;
    font-weight: 700;
}

.board-kit-move {
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--woh-line);
    border-radius: 999px;
    background: #fff;
    color: var(--woh-ink);
    cursor: pointer;
}

.board-kit-status {
    color: var(--woh-muted);
    white-space: nowrap;
}

.board-move-banner {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    z-index: 36;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(42rem, calc(100% - 2rem));
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: #1c2430;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 650;
    transform: translateX(-50%);
}

.board-move-banner.is-drag {
    pointer-events: none;
}

.board-move-banner button {
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-weight: 750;
    text-decoration: underline;
    cursor: pointer;
}

.board-kit-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.6rem 0.28rem 0.28rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--woh-shadow-float);
    color: #1c2430;
    font-size: 0.78rem;
    font-weight: 750;
    pointer-events: none;
    transform: translate3d(-9999px, -9999px, 0);
    transition: none;
    will-change: transform;
}

.board-kit-ghost img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
}

.board-toast {
    position: absolute;
    bottom: 0.9rem;
    left: 50%;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.55rem 0.5rem 0.9rem;
    border-radius: 999px;
    background: #1c2430;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 650;
    transform: translateX(-50%);
    box-shadow: var(--woh-shadow-float);
}

.board-toast a {
    color: #fff;
    font-weight: 750;
}

.board-toast button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.app-modal.move-kit-modal {
    max-width: 40rem;
}

.move-kit-places,
.move-kit-when {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0.75rem 1rem;
    align-items: start;
}

.move-kit-places {
    margin-bottom: 1rem;
}

.move-kit-note {
    margin: 0 0 1rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--woh-radius);
    background: var(--woh-subtle);
}

.move-kit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

@media (max-width: 640px) {
    .move-kit-places,
    .move-kit-when {
        grid-template-columns: 1fr;
    }
}

.extend-quick-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.extend-quick-picks .btn[aria-pressed="true"] {
    background: var(--woh-secondary);
    border-color: var(--woh-secondary);
    color: #fff;
}

.extend-hire-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

@media (max-width: 575.98px) {
    .app-modal-backdrop:has(.extend-hire-dialog) {
        align-items: flex-end;
        padding: 0;
    }

    .app-modal.extend-hire-dialog {
        max-width: none;
        border-radius: 1rem 1rem 0 0;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .extend-hire-dialog .form-control,
    .extend-hire-dialog .uk-date-field {
        width: 100%;
    }

    .extend-hire-actions {
        position: sticky;
        bottom: 0;
        margin: 0.75rem -1.2rem -0.2rem;
        padding: 0.75rem 1.2rem 0.15rem;
        background: var(--woh-white);
        border-top: 1px solid var(--woh-line);
    }

    .extend-hire-actions .btn {
        flex: 1 1 0;
    }
}

.edit-hire-page {
    max-width: 72rem;
}

.edit-hire-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "fields"
        "cost"
        "actions";
    align-items: start;
    gap: 0.5rem 1.5rem;
}

.edit-hire-fields {
    grid-area: fields;
    min-width: 0;
}

.edit-hire-cost {
    grid-area: cost;
    padding: 0.25rem 0 0.5rem;
    color: var(--woh-faint);
    font-size: 0.8125rem;
}

.edit-hire-cost h2 {
    margin: 0 0 0.35rem;
    color: var(--woh-ink);
    font-size: 0.875rem;
    font-weight: 700;
}

    .edit-hire-actions {
        grid-area: actions;
        grid-column: 1 / -1;
    }

@media (min-width: 1100px) {
    .edit-hire-grid {
        grid-template-columns: minmax(0, 1fr) 16rem;
        grid-template-areas:
            "fields cost"
            "actions cost";
    }

    .edit-hire-cost {
        position: sticky;
        top: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    .edit-hire-actions .btn {
        flex: 1 1 0;
    }
}