/* Ma Tatie global stylesheet. Loaded after Bootstrap by public and private shells. */

/* 1. Tokens and role themes */

:root {
    --mt-theme-color: #546179;
    --mt-primary: #D32675;
    --mt-primary-dark: #CC3366;
    --mt-functional-primary: #CC3366;
    --mt-functional-primary-dark: #A72552;
    --mt-functional-primary-rgb: 204, 51, 102;
    --mt-functional-primary-dark-rgb: 167, 37, 82;
    --mt-action: #2381CF;
    --mt-success: #0F7C36;
    --mt-success-dark: #0B5E29;
    --mt-success-rgb: 15, 124, 54;
    --mt-warning: #8A5700;
    --mt-warning-dark: #684200;
    --mt-warning-rgb: 138, 87, 0;
    --mt-danger: #B42318;
    --mt-danger-dark: #861A12;
    --mt-danger-rgb: 180, 35, 24;
    --mt-info: #176DA8;
    --mt-info-dark: #0D527F;
    --mt-info-rgb: 23, 109, 168;
    --mt-neutral: #546179;
    --mt-neutral-dark: #3F4859;
    --mt-neutral-rgb: 84, 97, 121;
    --mt-on-functional: #fff;
    --mt-white: #fff;
    --mt-white-rgb: 255, 255, 255;
    --mt-shadow-rgb: 0, 0, 0;
    --mt-brand-rgb: 211, 38, 117;
    --mt-orange-soft: #fff2eb;
    --mt-action-soft: #edf7ff;
    --mt-success-nav-soft: #eefcf3;
    --mt-brand-chip-bg: #fff5fa;
    --mt-brand-empty-bg: #fafafa;
    --mt-brand-empty-border: #ead9e2;
    --mt-surface-muted: #f8f9fa;
    --mt-calendar-available-bg: #e8f8ef;
    --mt-calendar-available-border: #b7e4c7;
    --mt-calendar-available-active-bg: #c9f2d8;
    --mt-calendar-available-active-border: #76d99a;
    --mt-calendar-unavailable-bg: #fdecec;
    --mt-calendar-unavailable-soft: #fff5f5;
    --mt-calendar-unavailable-border: #f1b0b7;
    --mt-calendar-hour-text: #123524;
    --mt-calendar-availability-rgb: 25, 135, 84;
    --mt-call-surface: #0f172a;
    --mt-call-video-surface: #020617;
    --mt-call-surface-rgb: 15, 23, 42;
    --mt-viz-series-1: #405F94;
    --mt-viz-series-2: #A64771;
    --mt-viz-series-3: #9A6500;
    --mt-viz-series-4: #16766F;
    --mt-viz-series-5: #6A51A3;
    --mt-viz-series-6: #B44C28;
    --mt-viz-series-7: #2F7A4B;
    --mt-viz-series-8: #4F6F7A;
    --mt-viz-series-9: #7A596F;
    --mt-viz-series-10: #6B6F36;
    --mt-viz-series-soft: rgba(64, 95, 148, .14);
    --mt-viz-series-muted: rgba(64, 95, 148, .68);
    --mt-viz-grid: rgba(84, 97, 121, .16);
    --mt-viz-text: #475569;
    --mt-viz-positive: #0F7C36;
    --mt-viz-negative: #B42318;
    --mt-viz-neutral: #546179;
    --mt-viz-surface: #FFFFFF;
    --mt-orange: #F05F1D;
    --mt-text: #54595F;
    --mt-muted: #707070;
    --mt-soft: #FAFAFA;
    --mt-border: #F1D6E2;
    --mt-surface: #fff;
    --mt-panel-bg: #fff;
    --mt-panel-border: rgba(211, 38, 117, .14);
    --mt-topbar-border: rgba(211, 38, 117, .16);
    --mt-chip-bg: #fff5fa;
    --mt-chip-border: rgba(211, 38, 117, .18);
    --mt-empty-bg: #fafafa;
    --mt-empty-border: #ead9e2;
    --mt-control-border: #ead9e2;
    --mt-focus-ring: var(--mt-functional-primary);
    --mt-primary-shadow: rgba(211, 38, 117, .28);
    --mt-shadow: 0 0 5px rgba(0, 0, 0, .13);
    --mt-radius-panel: .875rem;
    --mt-content-width-readable: 57.5rem;
    --mt-content-width-prose: 45rem;
    --mt-content-width-profile: 61.25rem;
    --mt-content-width-flow: 42rem;
    --mt-offcanvas-sm: 30rem;
    --mt-offcanvas-md: 34rem;
    --mt-offcanvas-lg: 42rem;
    --mt-offcanvas-xxl: 56rem;
    --mt-offcanvas-menu: 25rem;
    --mt-bottom-nav-height: 5.25rem;
    --mt-visual-size-xs: 1.5rem;
    --mt-visual-size-sm: 2.25rem;
    --mt-visual-size-md: 2.75rem;
    --mt-visual-size-lg: 4.5rem;
    --mt-visual-size-xl: 8rem;
}

body.mt-role-parent,
body.mt-simulator-parent,
.mt-acquisition[data-mt-acquisition-audience="parent"] {
    --mt-theme-color: #c7265d;
    --mt-primary: #e93672;
    --mt-primary-dark: #c7265d;
    --mt-functional-primary: #c7265d;
    --mt-functional-primary-dark: #a51f4c;
    --mt-functional-primary-rgb: 199, 38, 93;
    --mt-functional-primary-dark-rgb: 165, 31, 76;
    --mt-soft: #fff1f5;
    --mt-border: #f7d3df;
    --mt-surface: #fff;
    --mt-panel-bg: #fff;
    --mt-panel-border: rgba(233, 54, 114, .15);
    --mt-topbar-border: rgba(233, 54, 114, .16);
    --mt-chip-bg: #fff5fa;
    --mt-chip-border: rgba(233, 54, 114, .18);
    --mt-empty-bg: #fffafd;
    --mt-empty-border: #f1d6e2;
    --mt-control-border: #f1d6e2;
    --mt-primary-shadow: rgba(233, 54, 114, .28);
}

body.mt-role-tatie,
body.mt-simulator-tatie,
.mt-acquisition[data-mt-acquisition-audience="tatie"] {
    --mt-theme-color: #9a6500;
    --mt-primary: #9a6500;
    --mt-primary-dark: #704800;
    --mt-functional-primary: #9a6500;
    --mt-functional-primary-dark: #704800;
    --mt-functional-primary-rgb: 154, 101, 0;
    --mt-functional-primary-dark-rgb: 112, 72, 0;
    --mt-soft: #fff8db;
    --mt-border: #f4df9d;
    --mt-surface: #fffdf5;
    --mt-panel-bg: #fffef8;
    --mt-panel-border: rgba(154, 101, 0, .18);
    --mt-topbar-border: rgba(154, 101, 0, .18);
    --mt-chip-bg: #fff7d6;
    --mt-chip-border: rgba(154, 101, 0, .2);
    --mt-empty-bg: #fffdf0;
    --mt-empty-border: #eadca4;
    --mt-control-border: #eadca4;
    --mt-primary-shadow: rgba(154, 101, 0, .25);
}

body.mt-role-admin {
    --mt-theme-color: #475569;
    --mt-primary: #475569;
    --mt-primary-dark: #334155;
    --mt-functional-primary: #475569;
    --mt-functional-primary-dark: #334155;
    --mt-functional-primary-rgb: 71, 85, 105;
    --mt-functional-primary-dark-rgb: 51, 65, 85;
    --mt-soft: #f6f7f9;
    --mt-border: #d8dee8;
    --mt-surface: #fff;
    --mt-panel-bg: #fff;
    --mt-panel-border: rgba(71, 85, 105, .16);
    --mt-topbar-border: rgba(71, 85, 105, .16);
    --mt-chip-bg: #f3f6fa;
    --mt-chip-border: rgba(71, 85, 105, .18);
    --mt-empty-bg: #f9fafb;
    --mt-empty-border: #d8dee8;
    --mt-control-border: #d8dee8;
    --mt-primary-shadow: rgba(71, 85, 105, .22);
}

body.mt-role-neutral,
body.mt-simulator-neutral {
    --mt-theme-color: #546179;
    --mt-primary: #546179;
    --mt-primary-dark: #3f4859;
    --mt-functional-primary: #546179;
    --mt-functional-primary-dark: #3f4859;
    --mt-functional-primary-rgb: 84, 97, 121;
    --mt-functional-primary-dark-rgb: 63, 72, 89;
    --mt-soft: #f7f8fb;
    --mt-border: #dfe4ed;
    --mt-surface: #fff;
    --mt-panel-bg: #fff;
    --mt-panel-border: rgba(84, 97, 121, .15);
    --mt-topbar-border: rgba(84, 97, 121, .15);
    --mt-chip-bg: #f5f7fb;
    --mt-chip-border: rgba(84, 97, 121, .16);
    --mt-empty-bg: #fafbfc;
    --mt-empty-border: #dfe4ed;
    --mt-control-border: #dfe4ed;
    --mt-primary-shadow: rgba(84, 97, 121, .2);
}

/* 2. Primitives and Bootstrap foundations */

body {
    --mt-focus-ring: var(--mt-functional-primary);
    --bs-primary: var(--mt-functional-primary);
    --bs-primary-rgb: var(--mt-functional-primary-rgb);
    --bs-primary-text-emphasis: var(--mt-functional-primary-dark);
    --bs-primary-bg-subtle: rgba(var(--mt-functional-primary-rgb), .1);
    --bs-primary-border-subtle: rgba(var(--mt-functional-primary-rgb), .25);
    --bs-link-color: var(--mt-functional-primary);
    --bs-link-color-rgb: var(--mt-functional-primary-rgb);
    --bs-link-hover-color: var(--mt-functional-primary-dark);
    --bs-link-hover-color-rgb: var(--mt-functional-primary-dark-rgb);
    --bs-focus-ring-color: rgba(var(--mt-functional-primary-rgb), .25);
    --bs-secondary: var(--mt-neutral);
    --bs-secondary-rgb: var(--mt-neutral-rgb);
    --bs-secondary-text-emphasis: var(--mt-neutral-dark);
    --bs-secondary-bg-subtle: rgba(var(--mt-neutral-rgb), .1);
    --bs-secondary-border-subtle: rgba(var(--mt-neutral-rgb), .25);
    --bs-success: var(--mt-success);
    --bs-success-rgb: var(--mt-success-rgb);
    --bs-success-text-emphasis: var(--mt-success-dark);
    --bs-success-bg-subtle: rgba(var(--mt-success-rgb), .1);
    --bs-success-border-subtle: rgba(var(--mt-success-rgb), .25);
    --bs-warning: var(--mt-warning);
    --bs-warning-rgb: var(--mt-warning-rgb);
    --bs-warning-text-emphasis: var(--mt-warning-dark);
    --bs-warning-bg-subtle: rgba(var(--mt-warning-rgb), .1);
    --bs-warning-border-subtle: rgba(var(--mt-warning-rgb), .25);
    --bs-danger: var(--mt-danger);
    --bs-danger-rgb: var(--mt-danger-rgb);
    --bs-danger-text-emphasis: var(--mt-danger-dark);
    --bs-danger-bg-subtle: rgba(var(--mt-danger-rgb), .1);
    --bs-danger-border-subtle: rgba(var(--mt-danger-rgb), .25);
    --bs-info: var(--mt-info);
    --bs-info-rgb: var(--mt-info-rgb);
    --bs-info-text-emphasis: var(--mt-info-dark);
    --bs-info-bg-subtle: rgba(var(--mt-info-rgb), .1);
    --bs-info-border-subtle: rgba(var(--mt-info-rgb), .25);
    --bs-form-valid-color: var(--mt-success);
    --bs-form-valid-border-color: var(--mt-success);
    --bs-form-invalid-color: var(--mt-danger);
    --bs-form-invalid-border-color: var(--mt-danger);
    --bs-border-color: var(--mt-border);
    --bs-body-color: var(--mt-text);
    --bs-body-bg: var(--mt-soft);
    background: var(--mt-soft);
    color: var(--mt-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: calc(var(--mt-bottom-nav-height) + env(safe-area-inset-bottom));
}

body > main {
    flex: 1 0 auto;
}

.mt-acquisition {
    background: var(--mt-soft);
}

body > main p,
body > main .form-text,
body > main .text-secondary {
    overflow-wrap: break-word;
    white-space: normal;
}

.mt-skip-link {
    background: var(--mt-white);
    border: 1px solid var(--mt-functional-primary);
    border-radius: .5rem;
    color: var(--mt-functional-primary);
    inset-inline-start: .75rem;
    padding: .45rem .7rem;
    position: fixed;
    top: .75rem;
    transform: translateY(-150%);
    transition: transform .15s ease;
    z-index: 2000;
}

.mt-skip-link:focus {
    transform: translateY(0);
}

:where(
    a[href],
    button,
    [role="button"],
    [role="link"],
    summary,
    .mt-compose textarea,
    [tabindex]:not([tabindex="-1"])
):focus-visible:not(:disabled),
.offcanvas-header :is(h1, h2, h3, h4, h5, h6)[tabindex="-1"]:focus-visible {
    outline: .18rem solid var(--mt-focus-ring);
    outline-offset: .12rem;
}

.mt-visual-xs {
    --mt-visual-size: var(--mt-visual-size-xs);
    --mt-visual-font-size: .7rem;
}

.mt-visual-sm {
    --mt-visual-size: var(--mt-visual-size-sm);
    --mt-visual-font-size: .9rem;
}

.mt-visual-md {
    --mt-visual-size: var(--mt-visual-size-md);
    --mt-visual-font-size: 1.2rem;
}

.mt-visual-lg {
    --mt-visual-size: var(--mt-visual-size-lg);
    --mt-visual-font-size: 1.45rem;
}

.mt-visual-xl {
    --mt-visual-size: var(--mt-visual-size-xl);
    --mt-visual-font-size: 2.8rem;
}

.mt-tone-primary {
    --mt-visual-color: var(--mt-functional-primary);
    --mt-visual-color-dark: var(--mt-functional-primary-dark);
    --mt-visual-rgb: var(--mt-functional-primary-rgb);
}

.mt-tone-neutral {
    --mt-visual-color: var(--mt-neutral);
    --mt-visual-color-dark: var(--mt-neutral-dark);
    --mt-visual-rgb: var(--mt-neutral-rgb);
}

.mt-tone-success {
    --mt-visual-color: var(--mt-success);
    --mt-visual-color-dark: var(--mt-success-dark);
    --mt-visual-rgb: var(--mt-success-rgb);
}

.mt-tone-warning {
    --mt-visual-color: var(--mt-warning);
    --mt-visual-color-dark: var(--mt-warning-dark);
    --mt-visual-rgb: var(--mt-warning-rgb);
}

.mt-tone-danger {
    --mt-visual-color: var(--mt-danger);
    --mt-visual-color-dark: var(--mt-danger-dark);
    --mt-visual-rgb: var(--mt-danger-rgb);
}

.mt-tone-info {
    --mt-visual-color: var(--mt-info);
    --mt-visual-color-dark: var(--mt-info-dark);
    --mt-visual-rgb: var(--mt-info-rgb);
}

.mt-avatar,
.mt-photo-round,
.mt-icon-tile,
.mt-icon-action {
    flex: 0 0 var(--mt-visual-size, var(--mt-visual-size-md));
    font-size: var(--mt-visual-font-size, 1.2rem);
    height: var(--mt-visual-size, var(--mt-visual-size-md));
    line-height: 1;
    min-width: var(--mt-visual-size, var(--mt-visual-size-md));
    width: var(--mt-visual-size, var(--mt-visual-size-md));
}

.mt-avatar,
.mt-photo-round {
    border: 1px solid rgba(var(--mt-visual-rgb, var(--mt-functional-primary-rgb)), .24);
    border-radius: 50%;
    overflow: hidden;
}

.mt-avatar {
    align-items: center;
    background: rgba(var(--mt-visual-rgb, var(--mt-functional-primary-rgb)), .1);
    color: var(--mt-visual-color, var(--mt-functional-primary));
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
}

.mt-photo-round {
    aspect-ratio: 1;
    background: var(--mt-surface);
    display: block;
    object-fit: cover;
}

.mt-profile-photo-frame {
    aspect-ratio: 1;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 0;
    vertical-align: middle;
}

.mt-icon-tile,
.mt-icon-action {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    justify-content: center;
}

.mt-icon-tile {
    background: rgba(var(--mt-visual-rgb, var(--mt-functional-primary-rgb)), .1);
    border: 1px solid rgba(var(--mt-visual-rgb, var(--mt-functional-primary-rgb)), .18);
    color: var(--mt-visual-color, var(--mt-functional-primary));
}

.mt-icon-action {
    background: rgba(var(--mt-visual-rgb, var(--mt-functional-primary-rgb)), .08);
    border: 0;
    box-shadow: 0 2px 6px rgba(var(--mt-shadow-rgb), .05);
    color: var(--mt-visual-color, var(--mt-functional-primary));
    cursor: pointer;
    font-weight: 700;
    padding: 0;
    text-decoration: none;
}

.mt-icon-action:hover,
.mt-icon-action:focus {
    background: rgba(var(--mt-visual-rgb, var(--mt-functional-primary-rgb)), .16);
    color: var(--mt-visual-color-dark, var(--mt-functional-primary-dark));
}

.mt-icon-action:disabled,
.mt-icon-action[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .45;
    pointer-events: none;
}

.mt-icon-action-solid {
    background: var(--mt-visual-color, var(--mt-functional-primary));
    color: var(--mt-on-functional);
}

.mt-icon-action-solid:hover,
.mt-icon-action-solid:focus {
    background: var(--mt-visual-color-dark, var(--mt-functional-primary-dark));
    color: var(--mt-on-functional);
}

.mt-visual-emphasis {
    border-width: .25rem;
    box-shadow: 0 4px 14px rgba(var(--mt-visual-rgb, var(--mt-functional-primary-rgb)), .18);
}

.min-w-0 {
    min-width: 0 !important;
}

.mt-progress-thin {
    height: .25rem;
}

.mt-progress-value {
    width: var(--mt-progress-value, 0%);
}

.mt-inline-form {
    min-width: 16rem;
}

.mt-rule-value {
    max-width: 10rem;
}

/* Bootstrap cards are reserved for repeated content items. */
.card {
    --bs-card-bg: var(--mt-panel-bg);
    --bs-card-border-color: var(--mt-panel-border);
    --bs-card-border-radius: var(--mt-radius-panel);
}

.btn-primary {
    --bs-btn-color: var(--mt-on-functional);
    --bs-btn-bg: var(--mt-functional-primary);
    --bs-btn-border-color: var(--mt-functional-primary);
    --bs-btn-hover-bg: var(--mt-functional-primary-dark);
    --bs-btn-hover-border-color: var(--mt-functional-primary-dark);
    --bs-btn-active-bg: var(--mt-functional-primary-dark);
    --bs-btn-active-border-color: var(--mt-functional-primary-dark);
    --bs-btn-active-color: var(--mt-on-functional);
    --bs-btn-hover-color: var(--mt-on-functional);
    --bs-btn-disabled-color: var(--mt-on-functional);
    --bs-btn-disabled-bg: var(--mt-functional-primary);
    --bs-btn-disabled-border-color: var(--mt-functional-primary);
    --bs-btn-focus-shadow-rgb: var(--mt-functional-primary-rgb);
}

.btn-secondary,
.btn-outline-secondary {
    --mt-button-semantic: var(--mt-neutral);
    --mt-button-semantic-dark: var(--mt-neutral-dark);
    --mt-button-semantic-rgb: var(--mt-neutral-rgb);
}

.btn-success,
.btn-outline-success {
    --mt-button-semantic: var(--mt-success);
    --mt-button-semantic-dark: var(--mt-success-dark);
    --mt-button-semantic-rgb: var(--mt-success-rgb);
}

.btn-warning,
.btn-outline-warning {
    --mt-button-semantic: var(--mt-warning);
    --mt-button-semantic-dark: var(--mt-warning-dark);
    --mt-button-semantic-rgb: var(--mt-warning-rgb);
}

.btn-danger,
.btn-outline-danger {
    --mt-button-semantic: var(--mt-danger);
    --mt-button-semantic-dark: var(--mt-danger-dark);
    --mt-button-semantic-rgb: var(--mt-danger-rgb);
}

.btn-info,
.btn-outline-info {
    --mt-button-semantic: var(--mt-info);
    --mt-button-semantic-dark: var(--mt-info-dark);
    --mt-button-semantic-rgb: var(--mt-info-rgb);
}

.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info {
    --bs-btn-color: var(--mt-on-functional);
    --bs-btn-bg: var(--mt-button-semantic);
    --bs-btn-border-color: var(--mt-button-semantic);
    --bs-btn-hover-color: var(--mt-on-functional);
    --bs-btn-hover-bg: var(--mt-button-semantic-dark);
    --bs-btn-hover-border-color: var(--mt-button-semantic-dark);
    --bs-btn-active-color: var(--mt-on-functional);
    --bs-btn-active-bg: var(--mt-button-semantic-dark);
    --bs-btn-active-border-color: var(--mt-button-semantic-dark);
    --bs-btn-disabled-color: var(--mt-on-functional);
    --bs-btn-disabled-bg: var(--mt-button-semantic);
    --bs-btn-disabled-border-color: var(--mt-button-semantic);
    --bs-btn-focus-shadow-rgb: var(--mt-button-semantic-rgb);
}

.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-info {
    --bs-btn-color: var(--mt-button-semantic);
    --bs-btn-border-color: var(--mt-button-semantic);
    --bs-btn-hover-color: var(--mt-on-functional);
    --bs-btn-hover-bg: var(--mt-button-semantic);
    --bs-btn-hover-border-color: var(--mt-button-semantic);
    --bs-btn-active-color: var(--mt-on-functional);
    --bs-btn-active-bg: var(--mt-button-semantic-dark);
    --bs-btn-active-border-color: var(--mt-button-semantic-dark);
    --bs-btn-disabled-color: var(--mt-button-semantic);
    --bs-btn-disabled-border-color: var(--mt-button-semantic);
    --bs-btn-focus-shadow-rgb: var(--mt-button-semantic-rgb);
}

.btn-financial {
    --bs-btn-color: var(--mt-on-functional);
    --bs-btn-bg: var(--mt-info);
    --bs-btn-border-color: var(--mt-info);
    --bs-btn-hover-color: var(--mt-on-functional);
    --bs-btn-hover-bg: var(--mt-info-dark);
    --bs-btn-hover-border-color: var(--mt-info-dark);
    --bs-btn-active-color: var(--mt-on-functional);
    --bs-btn-active-bg: var(--mt-info-dark);
    --bs-btn-active-border-color: var(--mt-info-dark);
    --bs-btn-disabled-color: var(--mt-on-functional);
    --bs-btn-disabled-bg: var(--mt-info);
    --bs-btn-disabled-border-color: var(--mt-info);
    --bs-btn-focus-shadow-rgb: var(--mt-info-rgb);
}

.btn-outline-financial {
    --bs-btn-color: var(--mt-info-dark);
    --bs-btn-border-color: var(--mt-info);
    --bs-btn-hover-color: var(--mt-on-functional);
    --bs-btn-hover-bg: var(--mt-info);
    --bs-btn-hover-border-color: var(--mt-info);
    --bs-btn-active-color: var(--mt-on-functional);
    --bs-btn-active-bg: var(--mt-info-dark);
    --bs-btn-active-border-color: var(--mt-info-dark);
    --bs-btn-disabled-color: var(--mt-info);
    --bs-btn-disabled-border-color: var(--mt-info);
    --bs-btn-focus-shadow-rgb: var(--mt-info-rgb);
}

.mt-confirm-modal[data-mt-confirm-tone="danger"] [data-mt-confirm-title] {
    color: var(--mt-danger);
}

.mt-confirm-modal[data-mt-confirm-tone="financial"] [data-mt-confirm-title] {
    color: var(--mt-info);
}

.btn-outline-primary {
    --bs-btn-color: var(--mt-functional-primary);
    --bs-btn-border-color: var(--mt-functional-primary);
    --bs-btn-hover-bg: var(--mt-functional-primary);
    --bs-btn-hover-border-color: var(--mt-functional-primary);
    --bs-btn-hover-color: var(--mt-on-functional);
    --bs-btn-active-bg: var(--mt-functional-primary-dark);
    --bs-btn-active-border-color: var(--mt-functional-primary-dark);
    --bs-btn-active-color: var(--mt-on-functional);
    --bs-btn-disabled-color: var(--mt-functional-primary);
    --bs-btn-disabled-border-color: var(--mt-functional-primary);
    --bs-btn-focus-shadow-rgb: var(--mt-functional-primary-rgb);
}

.btn-link {
    --bs-btn-color: var(--mt-functional-primary);
    --bs-btn-hover-color: var(--mt-functional-primary-dark);
    --bs-btn-active-color: var(--mt-functional-primary-dark);
    --bs-btn-disabled-color: var(--mt-muted);
    --bs-btn-focus-shadow-rgb: var(--mt-functional-primary-rgb);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(var(--mt-functional-primary-rgb), .65);
    box-shadow: 0 0 0 .25rem rgba(var(--mt-functional-primary-rgb), .2);
}

.form-check-input:checked {
    background-color: var(--mt-functional-primary);
    border-color: var(--mt-functional-primary);
}

.form-switch [data-marketing-consent-toggle] {
    background-image: radial-gradient(circle closest-side, var(--mt-functional-primary) 70%, transparent 75%);
    background-size: 1em 100%;
    border-color: var(--mt-functional-primary);
}

.form-switch [data-marketing-consent-toggle]:checked {
    background-image: radial-gradient(circle closest-side, var(--mt-white) 70%, transparent 75%);
}

.pagination {
    --bs-pagination-color: var(--mt-functional-primary);
    --bs-pagination-hover-color: var(--mt-functional-primary-dark);
    --bs-pagination-focus-color: var(--mt-functional-primary-dark);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--mt-functional-primary-rgb), .2);
    --bs-pagination-active-bg: var(--mt-functional-primary);
    --bs-pagination-active-border-color: var(--mt-functional-primary);
}

.list-group {
    --bs-list-group-active-bg: var(--mt-functional-primary);
    --bs-list-group-active-border-color: var(--mt-functional-primary);
}

.accordion {
    --bs-accordion-active-color: var(--mt-functional-primary-dark);
    --bs-accordion-active-bg: rgba(var(--mt-functional-primary-rgb), .1);
    --bs-accordion-btn-focus-border-color: rgba(var(--mt-functional-primary-rgb), .65);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--mt-functional-primary-rgb), .2);
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-color: currentColor;
    background-image: none;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center / var(--bs-accordion-btn-icon-width) var(--bs-accordion-btn-icon-width) no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center / var(--bs-accordion-btn-icon-width) var(--bs-accordion-btn-icon-width) no-repeat;
}

.alert-primary {
    --bs-alert-color: var(--mt-functional-primary-dark);
    --bs-alert-bg: rgba(var(--mt-functional-primary-rgb), .1);
    --bs-alert-border-color: rgba(var(--mt-functional-primary-rgb), .25);
    --bs-alert-link-color: var(--mt-functional-primary-dark);
}

.breadcrumb a {
    color: var(--mt-functional-primary-dark);
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: var(--mt-functional-primary);
}

textarea[data-textarea-autosize] {
    height: var(--mt-textarea-height, auto);
    max-height: min(18rem, 50vh);
    overflow-y: var(--mt-textarea-overflow-y, auto);
}

textarea[data-textarea-autosize][data-textarea-autosize-ready="1"] {
    resize: none;
}

/* 3. Shared layouts */

.offcanvas[data-mt-offcanvas-purpose] {
    --bs-offcanvas-border-color: var(--mt-border);
    --mt-offcanvas-body-padding: 1rem;
    --mt-offcanvas-header-border: 1px solid var(--mt-border);
    --mt-offcanvas-header-padding: 1rem;
}

.offcanvas[data-mt-offcanvas-purpose="filter"],
.offcanvas[data-mt-offcanvas-purpose="action"] {
    --bs-offcanvas-width: min(100vw, var(--mt-offcanvas-sm));
}

.offcanvas[data-mt-offcanvas-purpose="form"],
.offcanvas[data-mt-offcanvas-purpose="detail"] {
    --bs-offcanvas-width: min(100vw, var(--mt-offcanvas-md));
}

.offcanvas[data-mt-offcanvas-purpose="analytics"] {
    --bs-offcanvas-width: min(100vw, var(--mt-offcanvas-lg));
}

.offcanvas[data-mt-offcanvas-purpose="editorial"],
.offcanvas[data-mt-offcanvas-purpose="conversation"] {
    --bs-offcanvas-width: min(100vw, var(--mt-offcanvas-xxl));
    --mt-offcanvas-header-padding: 1.25rem;
}

.offcanvas[data-mt-offcanvas-purpose="editorial"] {
    --mt-offcanvas-body-padding: 1.25rem;
}

.offcanvas[data-mt-offcanvas-purpose="conversation"] {
    --mt-offcanvas-body-padding: 0;
}

.offcanvas[data-mt-offcanvas-purpose="menu"] {
    --bs-offcanvas-width: min(100vw, var(--mt-offcanvas-menu));
    --mt-offcanvas-header-border: 0;
}

.offcanvas[data-mt-offcanvas-purpose] > .offcanvas-header {
    border-block-end: var(--mt-offcanvas-header-border);
    padding: var(--mt-offcanvas-header-padding);
}

.offcanvas[data-mt-offcanvas-purpose] > .offcanvas-body {
    padding: var(--mt-offcanvas-body-padding);
}

.mt-offcanvas-actions {
    background: var(--bs-offcanvas-bg, var(--mt-soft));
    z-index: 2;
}

:is(
    .offcanvas[data-mt-offcanvas-purpose="filter"],
    .offcanvas[data-mt-offcanvas-purpose="action"],
    .offcanvas[data-mt-offcanvas-purpose="form"],
    .offcanvas[data-mt-offcanvas-purpose="editorial"],
    .offcanvas[data-mt-offcanvas-purpose="conversation"]
) .mt-offcanvas-actions {
    border-block-start: 1px solid var(--mt-border);
    inset-block-end: 0;
    padding-block: .75rem calc(.75rem + env(safe-area-inset-bottom));
    position: sticky;
}

.mt-app-topbar {
    background: var(--mt-surface);
    border-bottom: 1px solid var(--mt-topbar-border);
    box-shadow: 0 2px 10px rgba(var(--mt-shadow-rgb), .04);
    position: sticky;
    top: 0;
    z-index: 1035;
}

.mt-topbar-inner {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr auto 1fr;
    min-height: 3.55rem;
}

.mt-topbar-start,
.mt-topbar-actions {
    align-items: center;
    display: inline-flex;
    gap: .45rem;
}

.mt-topbar-start {
    justify-self: start;
}

.mt-topbar-actions {
    justify-self: end;
}

.mt-brand-stack {
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    gap: .15rem;
    justify-self: center;
    line-height: 1.1;
    min-width: 0;
}

.mt-app-topbar .mt-icon-action > .badge {
    inset-inline-end: -.15rem;
    inset-inline-start: auto !important;
    transform: translateY(-45%) !important;
}

.mt-profile-shell {
    margin-inline: auto;
    max-width: var(--mt-content-width-profile);
    min-width: 0;
    padding-bottom: 1rem;
    width: 100%;
}

.mt-profile-prose {
    max-width: 68ch;
    overflow-wrap: anywhere;
}

.mt-profile-prose p {
    margin-bottom: .75rem;
}

.mt-profile-prose p:last-child {
    margin-bottom: 0;
}

.mt-long-read,
.mt-long-read *,
.mt-long-read .row,
.mt-long-read [class*="col-"],
.mt-long-read .card,
.mt-long-read .mt-panel {
    max-width: 100%;
    min-width: 0;
}

.mt-long-read .card,
.mt-long-read .mt-panel {
    width: 100%;
}

.mt-long-read-shell {
    margin-inline: auto;
    max-width: var(--mt-content-width-readable);
    min-width: 0;
    width: 100%;
}

.mt-long-read-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    min-width: 0;
    width: 100%;
}

.mt-long-read-body {
    line-height: 1.7;
    min-width: 0;
}

.mt-long-read-prose,
.mt-long-read-body > :where(p, ul, ol, blockquote, aside, h2, h3, h4) {
    margin-inline: auto;
    max-width: var(--mt-content-width-prose);
}

.mt-long-read :where(p, h1, h2, h3, h4, li, dt, dd),
.mt-long-read-body :where(p, h2, h3, h4, li) {
    overflow-wrap: anywhere;
}

.mt-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: center;
}

.mt-shell-private .mt-page-actions {
    justify-content: normal;
}

.mt-page-actions > * {
    max-width: 100%;
}

.mt-page-actions .btn {
    min-width: 0;
    white-space: normal;
}

.mt-page-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    min-width: 0;
}

.mt-page-header-content {
    min-width: 0;
}

.mt-page-header .mt-heading-page {
    margin: 0;
}

.mt-page-header-subtitle,
.mt-page-header-count {
    color: var(--mt-muted);
    font-size: .9rem;
    margin: .3rem 0 0;
    overflow-wrap: anywhere;
}

.mt-page-header-count {
    font-size: .8rem;
}

.mt-page-header-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: flex-end;
    min-width: 0;
}

.mt-offcanvas-header-copy {
    min-width: 0;
}

.mt-offcanvas-header-copy .mt-heading-panel {
    margin: 0;
}

.mt-offcanvas-header-subtitle {
    color: var(--mt-muted);
    font-size: .875rem;
    margin: .25rem 0 0;
    overflow-wrap: anywhere;
}

.mt-flow-shell {
    margin-inline: auto;
    max-width: var(--mt-content-width-flow);
    min-width: 0;
    width: 100%;
}

.mt-flow-header {
    margin-bottom: 1rem;
    min-width: 0;
}

.mt-flow-header .mt-heading-page {
    margin: 0;
}

.mt-flow-progress-label,
.mt-flow-header-subtitle {
    color: var(--mt-muted);
    font-size: .85rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.mt-flow-progress-label {
    font-weight: 700;
    margin-bottom: .3rem;
}

.mt-flow-header-subtitle {
    margin-top: .35rem;
}

.mt-flow-progress {
    --bs-progress-bg: rgba(var(--mt-functional-primary-rgb), .12);
    height: .375rem;
    margin-top: .75rem;
}

.mt-flow-progress .progress-bar {
    background: var(--mt-functional-primary);
}

.mt-flow-panel .mt-heading-panel {
    margin-bottom: 1rem;
}

.mt-flow-stage + .mt-flow-stage {
    border-block-start: 1px solid var(--mt-border);
    margin-block-start: 1rem;
    padding-block-start: 1rem;
}

.mt-flow-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    text-align: center;
}

.mt-flow-state-message {
    margin: 0;
    overflow-wrap: anywhere;
}

.mt-flow-state-action {
    align-self: stretch;
    margin-top: .25rem;
}

.mt-flow-spinner {
    color: var(--mt-functional-primary);
}

/* Experiment B: presentation only, from entry to the garde payment summary. */
html[data-mt-entry-transition="jovial_b"] {
    view-transition-name: none;
}

html[data-mt-entry-transition="jovial_b"] #main-content {
    view-transition-name: mt-entry-page;
}

html[data-mt-entry-transition="jovial_b"] .mt-app-topbar {
    view-transition-name: mt-entry-topbar;
}

html[data-mt-entry-transition="jovial_b"] .mt-bottom-nav {
    view-transition-name: mt-entry-bottom-nav;
}

html[data-mt-entry-transition="jovial_b"]::view-transition-group(mt-entry-topbar),
html[data-mt-entry-transition="jovial_b"]::view-transition-group(mt-entry-bottom-nav) {
    animation: none;
    z-index: 1;
}

html[data-mt-entry-transition="jovial_b"]::view-transition-old(mt-entry-topbar),
html[data-mt-entry-transition="jovial_b"]::view-transition-old(mt-entry-bottom-nav) {
    display: none;
}

html[data-mt-entry-transition="jovial_b"]::view-transition-new(mt-entry-topbar),
html[data-mt-entry-transition="jovial_b"]::view-transition-new(mt-entry-bottom-nav) {
    animation: none;
}

html[data-mt-entry-transition="jovial_b"]::view-transition-group(mt-entry-page) {
    animation: none;
    z-index: 0;
}

html[data-mt-entry-transition="jovial_b"]::view-transition-old(mt-entry-page),
html[data-mt-entry-transition="jovial_b"]::view-transition-new(mt-entry-page) {
    animation-duration: .18s;
    animation-timing-function: ease-out;
}

html[data-mt-entry-variant="jovial_b"] .mt-flow-shell[data-mt-flow="authentication"] > :is(.mt-flow-header, .mt-flow-panel) {
    animation: var(--mt-entry-arrival-animation, mt-entry-jovial-arrive) .42s cubic-bezier(.22, 1, .36, 1) backwards;
}

html[data-mt-entry-variant="jovial_b"] .mt-flow-shell[data-mt-flow="authentication"] > .mt-flow-panel {
    animation-delay: .06s;
    border-color: rgba(var(--mt-brand-rgb), .22);
    box-shadow: 0 .8rem 2rem rgba(var(--mt-brand-rgb), .12);
}

html[data-mt-entry-variant="jovial_b"] .mt-flow-shell[data-mt-flow="authentication"] > form.mt-flow-panel {
    position: relative;
}

html[data-mt-entry-variant="jovial_b"] .mt-flow-shell[data-mt-flow="authentication"] > form.mt-flow-panel::before,
html[data-mt-entry-variant="jovial_b"] .mt-flow-shell[data-mt-flow="authentication"] > form.mt-flow-panel::after {
    animation: mt-entry-jovial-pop .5s .14s cubic-bezier(.34, 1.56, .64, 1) backwards;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: .15rem solid var(--mt-white);
    border-radius: 50%;
    box-shadow: 0 .2rem .65rem rgba(var(--mt-shadow-rgb), .14);
    content: "";
    height: 3rem;
    inset-block-start: .65rem;
    pointer-events: none;
    position: absolute;
    width: 3rem;
}

html[data-mt-entry-variant="jovial_b"] .mt-flow-shell[data-mt-flow="authentication"] > form.mt-flow-panel::before {
    background-image: url("/assets/img/onboarding-parent.png");
    inset-inline-end: 3.65rem;
}

html[data-mt-entry-variant="jovial_b"] .mt-flow-shell[data-mt-flow="authentication"] > form.mt-flow-panel::after {
    animation-delay: .2s;
    background-image: url("/assets/img/onboarding-tatie.png");
    inset-inline-end: .75rem;
}

html[data-mt-entry-variant="jovial_b"] body[data-mt-theme="parent"] .mt-flow-shell[data-mt-flow="authentication"] > form.mt-flow-panel::after,
html[data-mt-entry-variant="jovial_b"] body[data-mt-theme="tatie"] .mt-flow-shell[data-mt-flow="authentication"] > form.mt-flow-panel::before {
    display: none;
}

html[data-mt-entry-variant="jovial_b"] body[data-mt-theme="parent"] .mt-flow-shell[data-mt-flow="authentication"] > form.mt-flow-panel::before,
html[data-mt-entry-variant="jovial_b"] body[data-mt-theme="tatie"] .mt-flow-shell[data-mt-flow="authentication"] > form.mt-flow-panel::after {
    inset-inline-end: .75rem;
}

html[data-mt-entry-variant="jovial_b"] .mt-flow-progress .progress-bar {
    animation: mt-entry-jovial-progress .55s .1s cubic-bezier(.22, 1, .36, 1) backwards;
    transform-origin: 0 50%;
}

html[data-mt-entry-variant="jovial_b"] [data-onboarding-root] > .alert:first-child {
    animation: var(--mt-entry-arrival-animation, mt-entry-jovial-arrive) .42s cubic-bezier(.22, 1, .36, 1) backwards;
    background: var(--mt-chip-bg);
    border-color: var(--mt-chip-border) !important;
    border-radius: var(--mt-radius-panel);
}

html[data-mt-entry-variant="jovial_b"] [data-onboarding-root] > .alert:first-child::before {
    background-image: url("/assets/img/onboarding-parent.png"), url("/assets/img/onboarding-tatie.png");
    background-position: 0 center, 100% center;
    background-repeat: no-repeat;
    background-size: 4rem;
    content: "";
    display: block;
    height: 4rem;
    margin: 0 auto .75rem;
    pointer-events: none;
    width: 8.5rem;
}

html[data-mt-entry-variant="jovial_b"] [data-mt-theme="parent"] [data-onboarding-root] > .alert:first-child::before,
html[data-mt-entry-variant="jovial_b"] [data-mt-theme="tatie"] [data-onboarding-root] > .alert:first-child::before {
    background-image: url("/assets/img/onboarding-parent.png");
    width: 4rem;
}

html[data-mt-entry-variant="jovial_b"] [data-mt-theme="tatie"] [data-onboarding-root] > .alert:first-child::before {
    background-image: url("/assets/img/onboarding-tatie.png");
}

html[data-mt-entry-variant="jovial_b"] :is(
    [data-mt-journey="guards"] > [data-jobs-calendar],
    [data-mt-journey="guard"] > section[aria-labelledby="job-hero-title"],
    [data-mt-journey="payment"] .mt-page-header,
    [data-mt-journey="payment"] dl
) {
    animation: var(--mt-entry-arrival-animation, mt-entry-jovial-arrive) .32s cubic-bezier(.22, 1, .36, 1) backwards;
}

html[data-mt-entry-variant="jovial_b"] :is(
    [data-onboarding-root],
    [data-mt-journey="guards"],
    [data-mt-journey="guard"]
) .mt-choice-card:has(input:checked),
html[data-mt-entry-variant="jovial_b"] #onboardingRoleOffcanvas label.card:has(input:checked) {
    background: var(--mt-chip-bg);
    border-color: var(--mt-functional-primary);
}

html[data-mt-entry-variant="jovial_b"] :is(
    [data-onboarding-root],
    [data-mt-journey="guards"],
    [data-mt-journey="guard"]
) .mt-choice-card input:checked,
html[data-mt-entry-variant="jovial_b"] #onboardingRoleOffcanvas input:checked {
    animation: mt-entry-jovial-pop .2s ease-out;
}

html[data-mt-entry-variant="jovial_b"] [data-onboarding-root] > section .list-group {
    gap: .6rem;
    position: relative;
}

html[data-mt-entry-variant="jovial_b"] [data-onboarding-root] > section .list-group::before {
    border-inline-start: .2rem dotted rgba(var(--mt-functional-primary-rgb), .24);
    content: "";
    inset-block: 1.25rem;
    inset-inline-start: 1.45rem;
    pointer-events: none;
    position: absolute;
}

html[data-mt-entry-variant="jovial_b"] [data-onboarding-step] {
    animation: var(--mt-entry-arrival-animation, mt-entry-jovial-arrive) .36s cubic-bezier(.22, 1, .36, 1) backwards;
    background: var(--mt-panel-bg);
    border: 1px solid var(--mt-panel-border) !important;
    border-radius: var(--mt-radius-panel) !important;
    box-shadow: 0 .25rem .8rem rgba(var(--mt-shadow-rgb), .06);
    position: relative;
    transition: box-shadow .15s ease, transform .15s ease;
}

html[data-mt-entry-variant="jovial_b"] [data-onboarding-step]:nth-child(2) {
    animation-delay: .04s;
}

html[data-mt-entry-variant="jovial_b"] [data-onboarding-step]:nth-child(3) {
    animation-delay: .08s;
}

html[data-mt-entry-variant="jovial_b"] [data-onboarding-step]:nth-child(4) {
    animation-delay: .12s;
}

html[data-mt-entry-variant="jovial_b"] [data-onboarding-step]:nth-child(n + 5) {
    animation-delay: .16s;
}

html[data-mt-entry-variant="jovial_b"] :is(
    .mt-flow-shell[data-mt-flow="authentication"],
    [data-onboarding-root],
    [data-mt-journey="guards"],
    [data-mt-journey="guard"]
) .btn-primary {
    transition: box-shadow .15s ease, transform .15s ease;
}

html[data-mt-entry-variant="jovial_b"] :is(
    .mt-flow-shell[data-mt-flow="authentication"],
    [data-onboarding-root],
    [data-mt-journey="guards"],
    [data-mt-journey="guard"]
) .btn-primary:active,
html[data-mt-entry-variant="jovial_b"] [data-onboarding-step].list-group-item-action:active {
    transform: translateY(1px) scale(.985);
}

@media (hover: hover) {
    html[data-mt-entry-variant="jovial_b"] :is(
        .mt-flow-shell[data-mt-flow="authentication"],
        [data-onboarding-root],
        [data-mt-journey="guards"],
        [data-mt-journey="guard"]
    ) .btn-primary:hover {
        box-shadow: 0 .45rem 1rem rgba(var(--mt-functional-primary-rgb), .2);
        transform: translateY(-1px);
    }

    html[data-mt-entry-variant="jovial_b"] [data-onboarding-step].list-group-item-action:hover {
        box-shadow: 0 .4rem 1rem rgba(var(--mt-shadow-rgb), .1);
        transform: translateX(.18rem);
    }
}

@keyframes mt-entry-jovial-arrive {
    from {
        transform: translateY(.45rem);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes mt-entry-jovial-pop {
    from {
        opacity: 0;
        transform: translateY(.35rem) scale(.82);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mt-entry-jovial-progress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.mt-bottom-nav {
    border-color: var(--mt-border) !important;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -3px 14px rgba(var(--mt-shadow-rgb), .07);
    z-index: 1030;
}

.mt-bottom-nav.bg-white {
    background: var(--mt-white) !important;
}

.mt-shell-private .mt-bottom-nav.bg-white {
    background: var(--mt-surface) !important;
}

.mt-bottom-nav-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: var(--mt-bottom-nav-height);
    max-width: 100%;
    padding-inline: .35rem;
    width: 100%;
}

.mt-bottom-nav-link {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--mt-muted);
    display: inline-flex;
    flex-direction: column;
    font-size: .72rem;
    font-weight: 600;
    gap: .22rem;
    justify-content: center;
    line-height: 1.1;
    min-width: 0;
    padding: .3rem .15rem;
    text-decoration: none;
}

.mt-bottom-nav-link i {
    align-items: center;
    background: rgba(var(--mt-functional-primary-rgb), .1);
    border-radius: 999px;
    color: var(--mt-functional-primary);
    display: inline-flex;
    font-size: 1rem;
    height: 1.75rem;
    justify-content: center;
    line-height: 1;
    width: 1.75rem;
}

.mt-bottom-nav-link-jobs i {
    background: var(--mt-orange-soft);
    color: var(--mt-orange);
}

.mt-bottom-nav-link-messages i,
.mt-bottom-nav-link-profiles i {
    background: var(--mt-action-soft);
    color: var(--mt-action);
}

.mt-bottom-nav-link-help i {
    background: var(--mt-success-nav-soft);
    color: var(--mt-success);
}

.mt-bottom-nav-link-main {
    transform: translateY(-.7rem);
}

.mt-bottom-nav-link-main i {
    background: var(--mt-functional-primary);
    box-shadow: 0 7px 18px rgba(var(--mt-brand-rgb), .28);
    color: var(--mt-on-functional);
    font-size: 1.25rem;
    height: 3rem;
    width: 3rem;
}

.mt-shell-private .mt-bottom-nav-link-main i {
    box-shadow: 0 7px 18px var(--mt-primary-shadow);
}

.mt-bottom-nav-link.active,
.mt-bottom-nav-link:hover,
.mt-bottom-nav-link:focus {
    color: var(--mt-functional-primary);
}

.mt-bottom-nav-link.active i,
.mt-bottom-nav-link:hover i,
.mt-bottom-nav-link:focus i {
    background: var(--mt-functional-primary);
    color: var(--mt-on-functional);
}

.mt-bottom-nav-badge {
    inset-inline-start: calc(50% + .75rem);
    top: .45rem;
}

.mt-bottom-nav-link.disabled {
    cursor: not-allowed;
    opacity: .45;
    pointer-events: none;
}

/* 4. Shared components */

.mt-data-list,
.mt-data-list-cards,
.mt-data-list-table {
    min-width: 0;
}

.mt-data-list-cards {
    display: grid;
    gap: 1rem;
}

.mt-data-list-card {
    background: var(--mt-panel-bg);
    border: 1px solid var(--mt-panel-border);
    border-radius: var(--mt-radius-panel);
    box-shadow: var(--mt-shadow);
    min-width: 0;
    padding: 1rem;
}

.mt-data-list-card :is(dd, p):last-child {
    margin-block-end: 0;
}

.mt-data-list-table {
    display: none;
}

.mt-data-list-table .table-responsive {
    margin: 0;
}

.mt-data-list-table .table {
    margin-block-end: 0;
}

.mt-data-list-link {
    color: inherit;
    text-decoration: none;
}

.mt-data-list-link:is(:hover, :focus-visible) {
    color: var(--mt-functional-primary-dark);
    text-decoration: underline;
}

.mt-horizontal-matrix {
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.mt-horizontal-matrix:focus-visible {
    outline: 3px solid var(--mt-focus-ring);
    outline-offset: 2px;
}

.mt-panel {
    background: var(--mt-panel-bg);
    border: 1px solid var(--mt-panel-border);
    border-radius: var(--mt-radius-panel);
    box-shadow: var(--mt-shadow);
    max-width: 100%;
    min-width: 0;
}

.mt-form-section {
    border-block-start: 1px solid var(--mt-border);
    min-width: 0;
    padding-block-start: 1rem;
}

.mt-choice-card {
    align-items: center;
    background: var(--mt-panel-bg);
    border: 1px solid var(--mt-control-border, var(--mt-border));
    border-radius: var(--mt-radius-panel);
    cursor: pointer;
    display: flex;
    gap: .75rem;
    padding: .75rem;
    width: 100%;
}

.mt-choice-card:focus-within {
    border-color: var(--mt-functional-primary);
    box-shadow: 0 0 0 .2rem var(--mt-focus-ring);
}

.mt-choice-card .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

.mt-job-price {
    color: var(--mt-text);
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
}

@media (min-width: 768px) {
    .mt-data-list[data-mt-data-list-breakpoint="md"] > .mt-data-list-cards {
        display: none;
    }

    .mt-data-list[data-mt-data-list-breakpoint="md"] > .mt-data-list-table {
        display: block;
    }
}

@media (min-width: 992px) {
    .mt-data-list[data-mt-data-list-breakpoint="xl"] > .mt-data-list-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mt-data-list[data-mt-data-list-breakpoint="lg"] > .mt-data-list-cards {
        display: none;
    }

    .mt-data-list[data-mt-data-list-breakpoint="lg"] > .mt-data-list-table {
        display: block;
    }
}

@media (min-width: 1200px) {
    .mt-data-list[data-mt-data-list-breakpoint="xl"] > .mt-data-list-cards {
        display: none;
    }

    .mt-data-list[data-mt-data-list-breakpoint="xl"] > .mt-data-list-table {
        display: block;
    }
}

.step-number {
    align-items: center;
    background: var(--mt-functional-primary);
    border-radius: 999px;
    color: var(--mt-on-functional);
    display: inline-flex;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.mt-brand {
    color: var(--mt-primary);
    font-size: 1.2rem;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

.mt-topbar-pov-badge {
    align-items: center;
    background: var(--mt-chip-bg);
    border: 1px solid var(--mt-chip-border);
    border-radius: 999px;
    color: var(--mt-functional-primary);
    display: inline-flex;
    font-size: .68rem;
    font-weight: 700;
    gap: .25rem;
    line-height: 1;
    max-width: 11rem;
    padding: .18rem .2rem .18rem .5rem;
}

.mt-topbar-pov-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-topbar-pov-clear {
    align-items: center;
    border-radius: 999px;
    color: inherit;
    display: inline-flex;
    height: 1.5rem;
    justify-content: center;
    text-decoration: none;
    width: 1.5rem;
}

.mt-topbar-pov-clear:hover,
.mt-topbar-pov-clear:focus {
    background: rgba(var(--mt-functional-primary-rgb), .12);
    color: var(--mt-functional-primary-dark);
}

.mt-public-menu .list-group-item.active {
    background: var(--mt-functional-primary);
    border-color: var(--mt-functional-primary);
}

.private-menu-section + .private-menu-section {
    margin-top: 1.5rem;
}

.private-menu-section-title {
    color: var(--mt-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.private-menu-section .list-group-item.active {
    background: var(--mt-functional-primary);
    border-color: var(--mt-functional-primary);
    color: var(--mt-on-functional);
}

.mt-file-picker-preview {
    align-items: center;
    background: rgba(var(--mt-functional-primary-rgb), .05);
    border: 1px solid var(--mt-border);
    border-radius: .75rem;
    display: flex;
    justify-content: center;
    min-height: 4.5rem;
    overflow: hidden;
    padding: .5rem;
}

.mt-shell-private .mt-file-picker-preview {
    border-color: var(--mt-panel-border);
}

.mt-file-picker-preview[hidden] {
    display: none;
}

.mt-file-picker-preview img {
    display: block;
    max-height: 12rem;
    max-width: 100%;
    object-fit: contain;
}

.mt-file-picker-preview-file {
    align-items: center;
    display: flex;
    gap: .75rem;
    max-width: 100%;
    min-width: 0;
}

[data-file-picker-input]:focus-visible + [data-file-picker-controls] [data-file-picker-trigger] {
    box-shadow: 0 0 0 .25rem rgba(var(--mt-functional-primary-rgb), .25);
    outline: 2px solid var(--mt-focus-ring);
    outline-offset: 2px;
}

.mt-profile-hero {
    position: relative;
    text-align: center;
}

.mt-profile-primary-action {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.mt-profile-primary-action > *,
.mt-profile-primary-action .btn {
    max-width: 100%;
}

.mt-avatar-wrap {
    display: inline-block;
    line-height: 0;
    position: relative;
}

.mt-profile-name {
    color: var(--mt-functional-primary);
    letter-spacing: 0;
}

.mt-profile-role,
.mt-muted {
    color: var(--mt-muted);
}

.mt-chip {
    align-items: center;
    background: var(--mt-brand-chip-bg);
    border: 1px solid rgba(var(--mt-brand-rgb), .18);
    border-radius: 999px;
    color: var(--mt-text);
    display: inline-flex;
    font-size: .82rem;
    gap: .35rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .32rem .7rem;
    text-align: center;
    white-space: normal;
}

.mt-shell-private .mt-chip {
    background: var(--mt-chip-bg);
    border-color: var(--mt-chip-border);
}

.mt-heading-hero,
.mt-heading-page,
.mt-heading-section,
.mt-heading-card,
.mt-heading-panel {
    color: var(--mt-text);
    letter-spacing: 0;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.mt-heading-hero {
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 800;
}

.mt-heading-page {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
}

.mt-heading-section,
.mt-section-title {
    font-size: 1.15rem;
    font-weight: 750;
}

.mt-heading-card {
    font-size: 1rem;
    font-weight: 700;
}

.mt-heading-panel {
    font-size: 1rem;
    font-weight: 750;
}

.mt-section-title {
    align-items: center;
    color: var(--mt-text);
    display: flex;
    gap: .55rem;
    margin-bottom: .75rem;
}

.mt-anchor-nav {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.mt-anchor-nav a {
    background: var(--mt-white);
    border: 1px solid rgba(var(--mt-brand-rgb), .16);
    border-radius: 999px;
    color: var(--mt-functional-primary);
    flex: 0 0 auto;
    font-size: .85rem;
    padding: .45rem .75rem;
    text-decoration: none;
}

.mt-shell-private .mt-anchor-nav a {
    background: var(--mt-panel-bg);
    border-color: var(--mt-panel-border);
    font-weight: 600;
}

.mt-empty-state {
    color: var(--mt-muted);
    margin-bottom: 0;
    text-align: center;
}

.mt-empty-state-compact {
    padding: .75rem 0;
}

.mt-empty-state-page {
    background: var(--mt-brand-empty-bg);
    border: 1px dashed var(--mt-brand-empty-border);
    border-radius: 12px;
    margin-inline: auto;
    max-width: 34rem;
    padding: 1.5rem;
    width: 100%;
}

.mt-shell-private .mt-empty-state-page {
    background: var(--mt-empty-bg);
    border-color: var(--mt-empty-border);
}

.mt-empty-state-icon {
    color: var(--mt-functional-primary);
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: .5rem;
}

.mt-empty-state-page .mt-empty-state-icon {
    font-size: 2rem;
}

.mt-empty-state-copy {
    margin-inline: auto;
    max-width: 26rem;
}

.mt-feedback {
    --mt-feedback-color: var(--mt-functional-primary);
    --mt-feedback-rgb: var(--mt-functional-primary-rgb);
    align-items: center;
    background: rgba(var(--mt-feedback-rgb), .08);
    border: 1px solid rgba(var(--mt-feedback-rgb), .24);
    border-radius: .75rem;
    color: var(--mt-text);
    display: flex;
    gap: .75rem;
    padding: .75rem;
    width: 100%;
}

.mt-feedback[hidden] {
    display: none !important;
}

.mt-feedback-refreshing {
    --mt-feedback-color: var(--mt-info);
    --mt-feedback-rgb: var(--mt-info-rgb);
}

.mt-feedback-stale {
    --mt-feedback-color: var(--mt-warning);
    --mt-feedback-rgb: var(--mt-warning-rgb);
}

.mt-feedback-error {
    --mt-feedback-color: var(--mt-danger);
    --mt-feedback-rgb: var(--mt-danger-rgb);
}

.mt-feedback-success {
    --mt-feedback-color: var(--mt-success);
    --mt-feedback-rgb: var(--mt-success-rgb);
}

.mt-feedback-icon {
    color: var(--mt-feedback-color);
    flex: 0 0 auto;
}

.mt-feedback-message {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.mt-feedback-action {
    --bs-btn-color: var(--mt-feedback-color);
    --bs-btn-border-color: rgba(var(--mt-feedback-rgb), .32);
    --bs-btn-hover-bg: rgba(var(--mt-feedback-rgb), .14);
    --bs-btn-hover-border-color: rgba(var(--mt-feedback-rgb), .46);
    --bs-btn-hover-color: var(--mt-feedback-color);
    --bs-btn-active-bg: rgba(var(--mt-feedback-rgb), .2);
    --bs-btn-active-border-color: rgba(var(--mt-feedback-rgb), .52);
    --bs-btn-active-color: var(--mt-feedback-color);
    flex: 0 0 auto;
}

@keyframes mt-skeleton-pulse {
    0%, 100% {
        opacity: .45;
    }

    50% {
        opacity: .82;
    }
}

.mt-skeleton {
    width: 100%;
}

.mt-skeleton[hidden] {
    display: none !important;
}

.mt-skeleton-row {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    padding-block: .6rem;
}

.mt-skeleton-block {
    animation: mt-skeleton-pulse 1.4s ease-in-out infinite;
    background: rgba(var(--mt-neutral-rgb), .16);
    border-radius: .4rem;
    display: block;
}

.mt-skeleton-icon {
    border-radius: 50%;
    flex: 0 0 var(--mt-visual-size-sm);
    height: var(--mt-visual-size-sm);
    width: var(--mt-visual-size-sm);
}

.mt-skeleton-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.mt-skeleton-line {
    height: .75rem;
    margin-bottom: .55rem;
}

.mt-skeleton-line-wide {
    width: 88%;
}

.mt-skeleton-line-medium {
    width: 68%;
}

.mt-skeleton-line-short {
    margin-bottom: 0;
    width: 42%;
}

.mt-toast {
    --mt-feedback-color: var(--mt-info);
    border-inline-start: .25rem solid var(--mt-feedback-color);
}

.mt-toast-icon {
    color: var(--mt-feedback-color);
}

.mt-toast-success {
    --mt-feedback-color: var(--mt-success);
}

.mt-toast-warning {
    --mt-feedback-color: var(--mt-warning);
}

.mt-toast-danger {
    --mt-feedback-color: var(--mt-danger);
}

.mt-toast-neutral {
    --mt-feedback-color: var(--mt-neutral);
}

.mt-panel-danger {
    border-color: rgba(var(--mt-danger-rgb), .25);
}

.mt-shell-private .mt-panel-form .form-control,
.mt-shell-private .mt-panel-form .form-select {
    border-color: var(--mt-control-border);
    border-radius: 10px;
}

.badge.text-bg-primary {
    background-color: var(--mt-functional-primary) !important;
}

.text-bg-primary,
.text-bg-secondary,
.text-bg-success,
.text-bg-warning,
.text-bg-danger,
.text-bg-info {
    color: var(--mt-on-functional) !important;
}

.mt-step-marker {
    height: 1.6rem;
    width: 1.6rem;
}

.mt-clickable-panel {
    cursor: pointer;
}

.mt-support-trap {
    inset-inline-start: -10000px;
}

.mt-profile-verification-controls {
    min-width: min(100%, 19rem);
}

.mt-document-preview-frame {
    height: min(75vh, 52rem);
}

.mt-push-toast-container {
    z-index: 1085;
}

.mt-phone-country-menu {
    min-width: min(22rem, calc(100vw - 2rem));
}

.mt-phone-country-list {
    max-height: var(--mt-phone-country-list-max-height, 18rem);
}

.mt-choice-search {
    inline-size: 100%;
    position: relative;
}

.mt-choice-search-toggle {
    background-color: var(--mt-panel-bg);
    color: var(--mt-text);
}

.mt-choice-search-menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
    margin-block-start: .25rem;
    max-inline-size: min(32rem, calc(100vw - 2rem));
    min-inline-size: 100%;
    position: static;
    z-index: 1070;
}

.mt-choice-search-list {
    max-block-size: min(18rem, calc(50vh - 1rem));
    overscroll-behavior: contain;
}

.mt-choice-search-option {
    white-space: normal;
}

.mt-choice-search-option-focused {
    box-shadow: 0 0 0 .2rem rgba(var(--mt-functional-primary-rgb), .25);
    outline: .125rem solid var(--mt-functional-primary);
    outline-offset: -.125rem;
}

.mt-choice-multiple > .form-select {
    min-block-size: 10rem;
}

/* 5. Specialized components */

.mt-analytics-visual {
    height: 150px;
}

.mt-analytics-section {
    padding-top: .25rem;
}

.mt-analytics-details > summary {
    cursor: pointer;
    list-style-position: inside;
}

.admin-notification-message > summary {
    cursor: pointer;
    list-style: none;
}

.admin-notification-message > summary::-webkit-details-marker {
    display: none;
}

.admin-notification-message-icon {
    transition: transform .15s ease;
}

.admin-notification-message[open] .admin-notification-message-icon {
    transform: rotate(90deg);
}

.mt-editorial-toolbar {
    background: var(--bs-body-bg);
    position: sticky;
    top: 0;
    z-index: 2;
}

.mt-editorial-toolbar.ql-toolbar.ql-snow {
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .5rem;
}

.mt-editorial-toolbar.ql-toolbar.ql-snow button,
.mt-editorial-toolbar.ql-toolbar.ql-snow .ql-picker-label {
    height: 2.75rem;
    width: 2.75rem;
}

.mt-editorial-toolbar.ql-toolbar.ql-snow .ql-picker.ql-header {
    height: 2.75rem;
    width: 7.5rem;
}

.mt-editorial-toolbar.ql-toolbar.ql-snow .ql-picker.ql-header .ql-picker-label {
    align-items: center;
    display: flex;
    width: 100%;
}

.mt-editorial-editor.ql-container.ql-snow {
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    font-family: inherit;
    font-size: 1rem;
    min-height: 22rem;
    overflow-wrap: anywhere;
}

.mt-editorial-editor .ql-editor {
    min-height: 22rem;
}

.mt-editorial-editor .ql-editor:focus {
    border-color: var(--mt-functional-primary, var(--bs-primary));
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--mt-functional-primary, var(--bs-primary)) 25%, transparent);
    outline: 0;
}

.mt-editorial-editor.is-invalid,
.mt-editorial-editor.is-invalid + .invalid-feedback {
    display: block;
}

.mt-editorial-editor .ql-editor h2,
.mt-editorial-editor .ql-editor h3 {
    margin-top: 1.25rem;
}

.mt-editorial-editor .ql-editor > :first-child {
    margin-top: 0;
}

.mt-editorial-editor .ql-editor > :last-child {
    margin-bottom: 0;
}

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

.mt-transaction-summary-card {
    background: var(--mt-panel-bg);
    border: 1px solid var(--mt-panel-border);
    border-radius: var(--mt-radius-panel);
    min-width: 0;
    padding: .85rem;
}

.mt-transaction-summary-card strong {
    font-size: clamp(.95rem, 3vw, 1.25rem);
    overflow-wrap: anywhere;
    white-space: nowrap;
}

.mt-transaction-card {
    background: var(--mt-panel-bg);
    border: 1px solid var(--mt-panel-border);
    border-radius: var(--mt-radius-panel);
    color: inherit;
    padding: .95rem;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.mt-transaction-card:focus-within,
.mt-transaction-card:hover {
    border-color: rgba(var(--mt-functional-primary-rgb), .3);
    box-shadow: 0 .45rem 1.25rem rgba(var(--mt-shadow-rgb), .08);
    color: inherit;
    transform: translateY(-1px);
}

.mt-transaction-icon {
    align-self: center;
}

.mt-transaction-amount {
    font-size: 1.05rem;
    line-height: 1.1;
    white-space: nowrap;
}

.mt-transaction-detail-amount,
.mt-finance-balance-amount {
    color: var(--mt-text);
    display: block;
    font-size: clamp(1.6rem, 6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.mt-finance-balances {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.mt-payment-method-card {
    background: var(--mt-panel-bg);
    border: 1px solid var(--mt-panel-border);
    border-radius: var(--mt-radius-panel);
    padding: 1rem;
}

.mt-status-timeline {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    list-style: none;
    margin: .85rem 0 0;
    padding: 0;
}

.mt-status-timeline-step {
    align-items: center;
    color: var(--mt-muted);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    position: relative;
    text-align: center;
}

.mt-status-timeline-step:not(:last-child)::after {
    border-top: 2px solid var(--mt-panel-border);
    content: "";
    inset-inline-start: calc(50% + 1rem);
    position: absolute;
    top: calc(var(--mt-visual-size-xs) / 2);
    inline-size: calc(100% - 2rem);
    z-index: 0;
}

.mt-status-timeline-step[data-mt-timeline-state="complete"]:not(:last-child)::after {
    border-color: var(--mt-success);
}

.mt-status-timeline-marker {
    position: relative;
    z-index: 1;
}

.mt-status-timeline-label {
    font-size: .78rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mt-status-timeline-step[aria-current="step"] .mt-status-timeline-label,
.mt-status-timeline-step[data-mt-timeline-state="complete"] .mt-status-timeline-label {
    color: var(--mt-text);
    font-weight: 600;
}

.mt-calendar-nav {
    gap: .5rem;
}

.mt-calendar-nav.btn-group {
    gap: 0;
}

.mt-calendar-nav .btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding: 0;
}

.mt-calendar-year-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mt-calendar-month-choice {
    background: var(--mt-panel-bg);
    border: 1px solid var(--mt-panel-border);
    border-radius: .65rem;
    color: inherit;
    font-weight: 700;
    min-height: 4rem;
}

.mt-calendar-month-grid {
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.mt-calendar-weekday {
    color: var(--mt-muted);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}

.mt-calendar-day {
    background: var(--mt-panel-bg);
    border: 1px solid var(--mt-panel-border);
    border-radius: .5rem;
    color: inherit;
    min-height: 4.25rem;
    min-width: 0;
    padding: 1.35rem .35rem .35rem;
    position: relative;
    text-decoration: none;
}

.mt-calendar-day-number {
    font-size: .8rem;
    font-weight: 700;
    inset-inline-start: 50%;
    position: absolute;
    top: .2rem;
    transform: translateX(-50%);
}

.mt-calendar-day-muted {
    opacity: .42;
}

.mt-calendar-day-available,
.mt-calendar-slot-available {
    background: var(--mt-calendar-available-bg);
    border-color: var(--mt-calendar-available-border);
}

.mt-calendar-slot-clickable.mt-calendar-slot-available {
    background: var(--mt-calendar-available-active-bg);
    box-shadow: inset 0 0 0 1px var(--mt-calendar-available-active-border);
}

.mt-calendar-day-unavailable {
    background: repeating-linear-gradient(135deg, var(--mt-calendar-unavailable-bg) 0, var(--mt-calendar-unavailable-bg) 6px, var(--mt-calendar-unavailable-soft) 6px, var(--mt-calendar-unavailable-soft) 12px);
    border-color: var(--mt-calendar-unavailable-border);
}

.mt-calendar-slot-unavailable {
    background: var(--mt-calendar-unavailable-bg);
}

.mt-calendar-day-busy,
.mt-calendar-slot-busy {
    background: var(--mt-panel-bg);
    border-color: rgba(var(--mt-functional-primary-rgb), .35);
}

.mt-calendar-jobs .mt-calendar-day-busy {
    background: rgba(var(--mt-functional-primary-rgb), .04);
}

.mt-calendar-count {
    align-items: center;
    background: var(--mt-functional-primary);
    border-radius: 999px;
    bottom: .35rem;
    color: var(--mt-on-functional);
    display: inline-flex;
    font-size: .68rem;
    font-weight: 700;
    height: 1.15rem;
    justify-content: center;
    inset-inline-start: .35rem;
    min-width: 1.15rem;
    padding: 0 .25rem;
    position: absolute;
}

.mt-calendar-slot {
    background: var(--mt-panel-bg);
    border: 1px solid var(--mt-panel-border);
    border-radius: .5rem;
    padding: .55rem .65rem;
}

.mt-calendar-slot-action {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0;
    text-align: start;
    width: 100%;
}

.mt-calendar-week-grid,
.mt-calendar-day-grid {
    background: var(--mt-panel-border);
    border: 1px solid var(--mt-panel-border);
    border-radius: .65rem;
    display: grid;
    gap: 1px;
    overflow: hidden;
    width: 100%;
}

.mt-calendar-week-grid {
    grid-template-columns: 2.75rem repeat(7, minmax(0, 1fr));
}

.mt-calendar-day-grid {
    grid-template-columns: 2.75rem minmax(0, 1fr);
}

.mt-calendar-week-header,
.mt-calendar-week-time,
.mt-calendar-week-cell,
.mt-calendar-day-time,
.mt-calendar-day-cell {
    background: var(--mt-panel-bg);
    min-width: 0;
}

.mt-calendar-week-header {
    font-size: .7rem;
    font-weight: 700;
    padding: .4rem .15rem;
    text-align: center;
}

.mt-calendar-week-header-button {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 0;
    width: 100%;
}

.mt-calendar-week-time,
.mt-calendar-day-time {
    align-items: flex-start;
    color: var(--mt-muted);
    display: flex;
    font-size: .68rem;
    font-weight: 700;
    justify-content: center;
    padding-top: .35rem;
}

.mt-calendar-week-cell,
.mt-calendar-day-cell {
    padding: 0;
}

.mt-calendar-week-cell .mt-calendar-slot,
.mt-calendar-day-cell .mt-calendar-slot {
    border: 0;
    border-radius: 0;
    font-size: .65rem;
    height: 100%;
    line-height: 1.15;
    overflow: hidden;
    padding: .25rem;
}

.mt-calendar-week-cell .mt-calendar-slot-action,
.mt-calendar-day-cell .mt-calendar-slot-action,
.mt-calendar-week-cell .mt-calendar-slot-static,
.mt-calendar-day-cell .mt-calendar-slot-static {
    display: block;
    height: 100%;
}

.mt-calendar-month-choice:focus-visible,
.mt-calendar-day:focus-visible,
.mt-calendar-slot-action:focus-visible,
.mt-calendar-week-header-button:focus-visible {
    outline: .18rem solid var(--mt-focus-ring);
    outline-offset: .1rem;
}

.mt-calendar-admin .mt-calendar-day {
    min-height: 7.8rem;
    padding: .35rem;
}

.mt-calendar-day-header {
    align-items: center;
    display: flex;
    gap: .2rem;
    justify-content: space-between;
    margin-bottom: .25rem;
    min-height: 1.15rem;
}

.mt-calendar-admin .mt-calendar-day-number {
    display: block;
    font-size: .75rem;
    inset-inline-start: auto;
    line-height: 1;
    position: static;
    transform: none;
}

.mt-calendar-hour-grid {
    background: var(--mt-panel-border);
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
}

.mt-calendar-hour {
    align-items: center;
    background: var(--mt-surface-muted);
    border: 0;
    color: var(--mt-calendar-hour-text);
    display: inline-flex;
    font-size: .625rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-height: 1.5rem;
    min-width: 1.5rem;
    padding: 0;
    text-decoration: none;
}

.mt-calendar-hour-active {
    background-color: rgba(var(--mt-calendar-availability-rgb), var(--mt-availability-alpha, .35));
    cursor: pointer;
    min-height: 1.5rem;
    min-width: 1.5rem;
}

.mt-calendar-hour-active:hover {
    filter: saturate(1.2);
}

.mt-calendar-hour-active:focus-visible {
    outline: .16rem solid var(--mt-focus-ring);
    outline-offset: .05rem;
    position: relative;
    z-index: 1;
}

.mt-messenger-tabs .nav-link {
    align-items: center;
    color: var(--mt-muted);
    display: inline-flex;
    font-size: .9rem;
    font-weight: 600;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: .4rem .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-messenger-tabs .nav-link.active {
    background: var(--mt-functional-primary);
    color: var(--mt-on-functional);
}

.mt-thread-list > article {
    max-width: 100%;
    min-width: 0;
}

.mt-thread-item {
    align-items: flex-start;
    border-top: 1px solid var(--mt-border);
    color: inherit;
    display: flex;
    gap: .8rem;
    min-width: 0;
    overflow: hidden;
    padding: .9rem 1rem;
    position: relative;
    text-decoration: none;
    width: 100%;
}

.mt-thread-list > article:first-child .mt-thread-item {
    border-top: 0;
}

.mt-thread-item:hover,
.mt-thread-item:focus-within {
    background: rgba(var(--mt-functional-primary-rgb), .04);
}

.mt-thread-item.is-selected {
    background: rgba(var(--mt-functional-primary-rgb), .09);
}

.mt-thread-profile-link {
    position: relative;
    z-index: 2;
}

.mt-thread-meta {
    align-items: center;
    display: flex;
    gap: .35rem;
    min-width: 0;
}

.mt-thread-meta strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-thread-item .flex-grow-1 {
    flex: 1 1 0;
    min-width: 0;
}

.mt-thread-item .mt-thread-preview {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-thread-context {
    align-items: center;
    color: var(--mt-muted);
    display: flex;
    gap: .35rem;
    min-height: 1.55rem;
    overflow: hidden;
    white-space: nowrap;
}

.mt-thread-context-pill {
    align-items: center;
    background: rgba(var(--mt-functional-primary-rgb), .06);
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 1.45rem;
    justify-content: center;
    width: 1.45rem;
}

.mt-thread-context-date {
    align-items: center;
    display: inline-flex;
    gap: .25rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-conversation-offcanvas {
    height: 100dvh;
    max-height: 100dvh;
}

.mt-conversation-offcanvas .offcanvas-header {
    background: var(--mt-panel-bg);
}

.mt-call-title {
    color: var(--mt-on-functional);
    font-size: 1rem;
    font-weight: 700;
}

.mt-call-mode-icon {
    font-size: 3rem;
    line-height: 1;
}

.mt-conversation-offcanvas .offcanvas-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.mt-conversation-title {
    flex: 1 1 auto;
    min-width: 0;
}

.mt-conversation-actions {
    flex: 0 0 auto;
}

.mt-conversation-body {
    background: linear-gradient(180deg, rgba(var(--mt-functional-primary-rgb), .04), transparent 12rem);
    padding: 0;
}

.mt-conversation-body > .row {
    display: flex;
    flex: 1 1 0;
    height: 100%;
    margin: 0;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

.mt-conversation-body > .row > .col-12 {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.mt-message-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}

.mt-message-bubble {
    border-radius: 1rem;
    box-shadow: var(--mt-shadow);
    max-width: min(100%, 38rem);
    padding: .5rem .75rem;
}

.mt-message-bubble-own {
    background: var(--mt-functional-primary);
    color: var(--mt-on-functional);
}

.mt-message-bubble-own .text-white-50 {
    color: var(--mt-on-functional) !important;
}

.mt-message-bubble-other {
    background: var(--mt-panel-bg);
    color: var(--mt-text);
}

.mt-notification-summary {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-compose {
    background: var(--mt-panel-bg);
    border-top: 1px solid var(--mt-border);
    flex: 0 0 auto;
    padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom));
    position: relative;
    z-index: 2;
}

.mt-compose-row {
    align-items: flex-end;
    background: rgba(var(--mt-functional-primary-rgb), .05);
    border-radius: 1.25rem;
    display: flex;
    gap: .4rem;
    padding: .45rem;
}

.mt-compose textarea {
    --mt-textarea-max-height: 9rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    max-height: var(--mt-textarea-max-height);
    min-height: 2.5rem;
}

.mt-compose textarea:focus {
    background: transparent;
    box-shadow: none;
}

.mt-attachment-panel {
    background: rgba(var(--mt-functional-primary-rgb), .04);
    border-radius: 1rem;
    margin-top: .75rem;
    padding: .75rem;
}

body.mt-call-open {
    overflow: hidden;
}

.mt-call-shell {
    background: var(--mt-call-surface);
    border-radius: 0;
    color: var(--mt-on-functional);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    inset: 0;
    max-height: 100dvh;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

.mt-call-shell[hidden] {
    display: none !important;
}

.mt-call-header {
    align-items: center;
    background: rgba(var(--mt-call-surface-rgb), .88);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: calc(.85rem + env(safe-area-inset-top)) 1rem .85rem;
    padding-inline: calc(1rem + env(safe-area-inset-left, 0px)) calc(1rem + env(safe-area-inset-right, 0px));
}

.mt-call-stage {
    display: grid;
    gap: 0;
    min-height: 0;
    padding: 0;
}

.mt-call-video {
    background: var(--mt-call-video-surface);
    border: 0;
    border-radius: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.mt-call-video video {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.mt-call-local {
    bottom: 1rem;
    height: 8.5rem;
    position: absolute;
    inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px));
    width: 6.25rem;
    z-index: 3;
}

.mt-call-audio .mt-call-video video,
.mt-call-audio .mt-call-local {
    display: none;
}

.mt-call-audio-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    height: 100%;
    justify-content: center;
    min-height: 0;
}

.mt-call-has-remote-video .mt-call-audio-card {
    display: none;
}

.mt-call-controls {
    align-items: center;
    background: rgba(var(--mt-call-surface-rgb), .9);
    border-top: 1px solid rgba(var(--mt-white-rgb), .12);
    display: flex;
    gap: .75rem;
    justify-content: center;
    padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
    padding-inline: calc(1rem + env(safe-area-inset-left, 0px)) calc(1rem + env(safe-area-inset-right, 0px));
}

.mt-call-control {
    background: rgba(var(--mt-white-rgb), .12);
    color: var(--mt-on-functional);
}

.mt-call-control:hover,
.mt-call-control:focus {
    background: rgba(var(--mt-white-rgb), .22);
    color: var(--mt-on-functional);
}

.mt-call-control:focus-visible {
    outline: .18rem solid var(--mt-on-functional);
    outline-offset: .15rem;
}

.mt-call-control-danger {
    background: var(--mt-danger);
}

.mt-call-control-muted {
    background: var(--mt-neutral);
}

/* 6. Responsive and accessibility exceptions */

@media (prefers-reduced-motion: reduce) {
    html[data-mt-entry-transition="jovial_b"]::view-transition-group(mt-entry-page),
    html[data-mt-entry-transition="jovial_b"]::view-transition-old(mt-entry-page),
    html[data-mt-entry-transition="jovial_b"]::view-transition-new(mt-entry-page) {
        animation: none;
    }

    html[data-mt-entry-variant="jovial_b"] .mt-flow-shell[data-mt-flow="authentication"] > .mt-flow-header,
    html[data-mt-entry-variant="jovial_b"] .mt-flow-shell[data-mt-flow="authentication"] > .mt-flow-panel,
    html[data-mt-entry-variant="jovial_b"] .mt-flow-shell[data-mt-flow="authentication"] > form.mt-flow-panel::before,
    html[data-mt-entry-variant="jovial_b"] .mt-flow-shell[data-mt-flow="authentication"] > form.mt-flow-panel::after,
    html[data-mt-entry-variant="jovial_b"] .mt-flow-progress .progress-bar,
    html[data-mt-entry-variant="jovial_b"] [data-onboarding-root] > .alert:first-child,
    html[data-mt-entry-variant="jovial_b"] [data-onboarding-step],
    html[data-mt-entry-variant="jovial_b"] :is(
        [data-mt-journey="guards"] > [data-jobs-calendar],
        [data-mt-journey="guard"] > section[aria-labelledby="job-hero-title"],
        [data-mt-journey="payment"] .mt-page-header,
        [data-mt-journey="payment"] dl
    ),
    html[data-mt-entry-variant="jovial_b"] :is(
        [data-onboarding-root],
        [data-mt-journey="guards"],
        [data-mt-journey="guard"]
    ) .mt-choice-card input:checked,
    html[data-mt-entry-variant="jovial_b"] #onboardingRoleOffcanvas input:checked {
        animation: none;
    }

    html[data-mt-entry-variant="jovial_b"] :is(
        .mt-flow-shell[data-mt-flow="authentication"],
        [data-onboarding-root],
        [data-mt-journey="guards"],
        [data-mt-journey="guard"]
    ) .btn-primary,
    html[data-mt-entry-variant="jovial_b"] [data-onboarding-step] {
        transition: none;
    }

    html[data-mt-entry-variant="jovial_b"] :is(
        .mt-flow-shell[data-mt-flow="authentication"],
        [data-onboarding-root],
        [data-mt-journey="guards"],
        [data-mt-journey="guard"]
    ) .btn-primary:is(:hover, :active),
    html[data-mt-entry-variant="jovial_b"] [data-onboarding-step].list-group-item-action:is(:hover, :active) {
        transform: none;
    }

    .mt-skeleton-block {
        animation: none;
    }

    .mt-skip-link {
        transition: none;
    }

    .mt-transaction-card {
        transition: none;
    }

    .mt-transaction-card:focus-within,
    .mt-transaction-card:hover {
        transform: none;
    }

    .admin-notification-message-icon {
        transition: none;
    }
}

@media (min-width: 992px) {
    .mt-analytics-visual {
        height: 180px;
    }
}

@media (max-width: 991.98px) {
    .mt-calendar-hour-grid {
        grid-template-columns: repeat(3, minmax(1.5rem, 1fr));
    }
}

@media (max-width: 767.98px) {
    .mt-calendar-hour-grid {
        grid-template-columns: repeat(2, minmax(1.5rem, 1fr));
    }
}

@media (max-width: 575.98px) {
    .mt-transaction-card {
        gap: .65rem !important;
        padding: .85rem;
    }

    .mt-transaction-summary-card {
        padding: .7rem;
    }

    .mt-transaction-summary-card strong {
        font-size: .98rem;
    }

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

    .mt-calendar-month-choice {
        min-height: 3.4rem;
    }

    .mt-calendar-month-grid {
        gap: .25rem;
    }

    .mt-calendar-day {
        border-radius: .4rem;
        min-height: 3.4rem;
        padding-inline: .2rem;
    }

    .mt-calendar-count {
        inset-inline-start: .25rem;
    }

    .mt-calendar-week-grid {
        grid-template-columns: 2.35rem repeat(7, minmax(0, 1fr));
    }

    .mt-calendar-day-grid {
        grid-template-columns: 2.35rem minmax(0, 1fr);
    }

    .mt-calendar-week-header {
        font-size: .62rem;
        padding-inline: .05rem;
    }

    .mt-calendar-week-time,
    .mt-calendar-day-time,
    .mt-calendar-week-cell .mt-calendar-slot,
    .mt-calendar-day-cell .mt-calendar-slot {
        font-size: .58rem;
    }

    .mt-calendar-jobs {
        padding-inline: .9rem !important;
    }

    .mt-calendar-jobs .mt-calendar-header {
        align-items: center !important;
        flex-wrap: nowrap;
    }

    .mt-calendar-jobs .mt-calendar-header h2 {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mt-calendar-jobs .mt-calendar-actions {
        flex: 0 0 auto;
        justify-content: flex-end;
        max-width: none;
        width: auto;
    }

    .mt-calendar-jobs .mt-calendar-content,
    .mt-calendar-jobs .mt-calendar-month-grid {
        max-width: calc(100vw - 3.5rem);
        overflow: hidden;
        width: calc(100vw - 3.5rem);
    }

    .mt-calendar-admin .mt-calendar-month-grid {
        gap: .18rem;
    }

    .mt-calendar-admin .mt-calendar-day {
        border-radius: .35rem;
        min-height: 6rem;
        padding: .18rem;
    }

    .mt-calendar-admin .mt-calendar-weekday {
        font-size: .58rem;
    }

    .mt-calendar-admin .mt-calendar-day-header {
        margin-bottom: .12rem;
        min-height: .95rem;
    }

    .mt-calendar-admin .mt-calendar-day-number {
        font-size: .62rem;
    }

}

@media (max-width: 767.98px) {
    .mt-profile-shell-has-primary-action {
        padding-bottom: 5.75rem;
    }

    .mt-profile-primary-action {
        align-items: center;
        background: var(--mt-surface);
        border: 1px solid var(--mt-border);
        border-radius: var(--mt-radius-panel) var(--mt-radius-panel) 0 0;
        bottom: calc(var(--mt-bottom-nav-height) + env(safe-area-inset-bottom));
        box-shadow: 0 -3px 14px rgba(var(--mt-shadow-rgb), .1);
        inset-inline: calc(.75rem + env(safe-area-inset-left, 0px)) calc(.75rem + env(safe-area-inset-right, 0px));
        justify-content: center;
        margin: 0;
        padding: .6rem;
        position: fixed;
        z-index: 1025;
    }

    .mt-profile-primary-action > * {
        width: min(100%, 30rem);
    }

    .mt-profile-primary-action .btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) and (max-height: 320px) {
    .mt-profile-shell-has-primary-action {
        padding-bottom: 0;
    }

    .mt-profile-primary-action {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        inset: auto;
        margin-top: 1.5rem;
        padding: 0;
        position: static;
    }
}

@media (max-width: 430px) {
    .mt-calendar-hour-grid {
        grid-template-columns: minmax(1.5rem, 1fr);
    }
}

@media (max-width: 575.98px) {
    .mt-messenger-tabs .nav-link {
        font-size: .82rem;
        padding-inline: .35rem;
        white-space: normal;
    }

    .mt-thread-item {
        padding: .8rem .85rem;
    }

    .mt-conversation-offcanvas .offcanvas-header {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: .55rem;
    }

    .mt-conversation-title {
        flex: 1 1 100%;
        width: 100%;
    }

    .mt-conversation-actions {
        justify-content: flex-end;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .mt-call-local {
        height: 12rem;
        width: 9rem;
    }

}

@media (max-height: 22rem) {
    .mt-call-header {
        padding: calc(.5rem + env(safe-area-inset-top)) 1rem .5rem;
        padding-inline: calc(1rem + env(safe-area-inset-left, 0px)) calc(1rem + env(safe-area-inset-right, 0px));
    }

    .mt-call-audio-card {
        gap: .35rem;
    }

    .mt-call-mode-icon {
        font-size: 2.25rem;
    }

    .mt-call-local {
        aspect-ratio: 25 / 34;
        bottom: .5rem;
        height: min(5rem, calc(100% - 1rem));
        width: auto;
    }

    .mt-call-controls {
        gap: .5rem;
        padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
        padding-inline: calc(1rem + env(safe-area-inset-left, 0px)) calc(1rem + env(safe-area-inset-right, 0px));
    }
}

@media (max-width: 575.98px) {
    .mt-profile-shell {
        max-width: calc(100vw - 1.5rem);
    }

    .mt-profile-shell .mt-panel {
        overflow: hidden;
    }

    .mt-page-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin-inline: auto;
        max-width: 100%;
        width: 100%;
    }

    .mt-page-actions > * {
        min-width: 0;
        width: 100%;
    }

    .mt-page-actions > .btn {
        width: 100%;
    }
}