/* Bootstrap and Select2 restated in our tokens. The one file allowed !important. */

/* === Bootstrap === */
/* Bootstrap 5.3's variables onto our tokens. The -rgb triplets are --accent, --accent-hover and --ink. */
:root,
[data-bs-theme=light] {
    --bs-blue: var(--accent);
    --bs-primary: var(--accent);
    --bs-primary-rgb: 10, 125, 147;
    --bs-primary-text-emphasis: var(--accent-hover);
    --bs-primary-bg-subtle: var(--accent-wash);
    --bs-primary-border-subtle: var(--accent-tint);
    --bs-font-sans-serif: var(--font-sans);
    --bs-font-monospace: var(--font-mono);
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.4667;
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 21, 24, 27;
    --bs-body-bg: var(--surface);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-2);
    --bs-tertiary-color: var(--ink-3);
    --bs-secondary-bg: var(--sunken);
    --bs-tertiary-bg: var(--page);
    --bs-heading-color: var(--ink);
    --bs-link-color: var(--accent-ink);
    --bs-link-color-rgb: 8, 106, 125;
    --bs-link-hover-color: var(--accent-hover);
    --bs-link-hover-color-rgb: 8, 106, 125;
    --bs-border-color: var(--line);
    --bs-border-color-translucent: var(--line);
    --bs-border-radius: var(--radius-control);
    --bs-border-radius-lg: var(--radius-card);
    --bs-focus-ring-color: rgba(10, 125, 147, 0.25);

    /* Bootstrap's semantic colours onto the state tones; --bs-warning stays for .text-bg-warning. */
    --bs-success: var(--tone-done-ink);
    --bs-success-rgb: 21, 128, 61;
    --bs-success-text-emphasis: var(--tone-done-ink);
    --bs-success-bg-subtle: var(--tone-done-fill);
    --bs-success-border-subtle: color-mix(in srgb, var(--tone-done-ink) 30%, var(--surface));
    --bs-warning-text-emphasis: var(--tone-pending-ink);
    --bs-warning-bg-subtle: var(--tone-pending-fill);
    --bs-warning-border-subtle: color-mix(in srgb, var(--tone-pending-ink) 30%, var(--surface));
    --bs-danger: var(--danger);
    --bs-danger-rgb: 180, 35, 24;
    --bs-danger-text-emphasis: var(--danger);
    --bs-danger-bg-subtle: var(--tone-refused-fill);
    --bs-danger-border-subtle: color-mix(in srgb, var(--danger) 30%, var(--surface));
    --bs-info: var(--accent);
    --bs-info-rgb: 10, 125, 147;
    --bs-info-text-emphasis: var(--accent-hover);
    --bs-info-bg-subtle: var(--accent-wash);
    --bs-info-border-subtle: var(--accent-tint);
    --bs-form-valid-color: var(--tone-done-ink);
    --bs-form-valid-border-color: var(--tone-done-ink);
    --bs-form-invalid-color: var(--danger);
    --bs-form-invalid-border-color: var(--danger);
}


.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger-hover);
    --bs-btn-hover-border-color: var(--danger-hover);
    --bs-btn-focus-shadow-rgb: 180, 35, 24;
    --bs-btn-active-bg: var(--danger-hover);
    --bs-btn-active-border-color: var(--danger-hover);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-focus-shadow-rgb: 180, 35, 24;
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-disabled-color: var(--danger);
    --bs-btn-disabled-border-color: var(--danger);
}

/* Bootstrap's warning yellow is unreadable as text. */
.text-warning {
    color: var(--tone-pending-ink) !important;
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* Touch: a close button and a menu's row are a control high (03-design-system.md "Controls"). */
@media (pointer: coarse) {
    .btn-close,
    :is(.modal-header, .offcanvas-header) .btn-close {
        padding: calc((var(--control-h) - 1em) / 2);
    }

    .dropdown-item {
        padding-block: calc((var(--control-h) - 1lh) / 2);
    }
}

.form-control:not(.form-control-sm, .form-control-lg),
.form-select:not(.form-select-sm, .form-select-lg) {
    min-height: var(--control-h);
    font-size: var(--control-font);
}

/* A field's edge is the picker's beside it; a disabled one keeps the faint line on its grey. */
.form-control,
.form-select,
.input-group-text {
    --bs-border-color: var(--line-strong);
}
.form-control:disabled,
.form-select:disabled {
    --bs-border-color: var(--line);
}

/* A tick box: 18px, a 1.5px --ink-3 edge, 5px corners (a radio round). */
.form-check-input {
    --bs-border-color: var(--ink-3);
    width: calc(var(--space-4) + var(--space-1) / 2);
    height: calc(var(--space-4) + var(--space-1) / 2);
    margin-top: calc((1lh - var(--space-4) - var(--space-1) / 2) / 2);
    border-width: calc(var(--space-1) * 3 / 8);
}
.form-check-input[type=checkbox] {
    border-radius: calc(var(--radius-control) - 1px);
}

/* A field's label is the micro label (Calendar, Pipeline, Forage, Discounts boards). */
.form-label {
    margin-bottom: var(--space-1);
    font: var(--text-micro);
    letter-spacing: var(--micro-tracking);
    text-transform: uppercase;
    color: var(--ink-2);
}

/* The desktop page's gutter (boards: 20px 28px); main's p-3 is Bootstrap's !important padding. */
@media screen and (min-width: 1024px) {
    main.p-3 {
        padding: calc(var(--space-4) + var(--space-1)) calc(var(--space-5) + var(--space-1)) !important;
    }
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--accent);
    border-color: var(--accent);
}




.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--accent);
}

.pagination {
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

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

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--accent);
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23086A7D' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}


/* Cards: a border, never a shadow. */
.card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--radius-card);
    --bs-card-inner-border-radius: calc(var(--radius-card) - var(--bs-border-width));
    --bs-card-box-shadow: none;
}


/* === Select2 === */
/* select2.css loads after this file, so each rule carries one class more than select2's own. */
.select2-container.select2-container--default .select2-selection--single,
.select2-container.select2-container--default .select2-selection--multiple,
.select2-container .select2-dropdown,
.select2-container.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--line-strong);
}

.select2-container.select2-container--default .select2-selection--single,
.select2-container.select2-container--default .select2-selection--multiple {
    border-radius: var(--radius-control);
}

.select2-container.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--accent);
}

.select2-container.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--sunken);
}

.select2-container.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent-wash);
    color: var(--ink);
}

/* 1rem on touch or iOS zooms the page on focus; tracks the bumped .input-group-text beside it. */
@media (max-width: 767.98px), (pointer: coarse) {
    .select2-container {
        font-size: 1rem;
    }
}

/* The touch sheet (components.css "Picker"): select2 rewrites top/left/width inline on every
   reposition, so pinning it to the bottom of the viewport takes !important. */
@media (pointer: coarse) {
    .select2-container.select2-container--open:has(> .select2-sheet) {
        position: fixed !important;
        inset: auto 0 var(--keyboard-h, 0px) !important;
        width: auto !important;
        z-index: var(--z-overlay);
    }

    .select2-container--open:has(> .select2-sheet) .select2-sheet {
        position: relative;
        width: 100% !important;
    }
}

/* === FullCalendar === */
/* FullCalendar's Monarch theme in our tokens. Its classes are hashed, so rules key on calendar_page.js's
   cal-* names under an id that outranks them. */
.calendar-page {
    --fc-monarch-foreground: var(--ink);
    --fc-monarch-muted-foreground: var(--ink-2);
    --fc-monarch-faint-foreground: var(--ink-3);
    --fc-monarch-background: var(--surface);
    --fc-monarch-popover: var(--surface);
    --fc-monarch-border: var(--line-soft);
    --fc-monarch-strong-border: var(--line);
    --fc-monarch-secondary: var(--accent-wash);
    --fc-monarch-secondary-foreground: var(--accent);
    --fc-monarch-tertiary: var(--accent);
    --fc-monarch-tertiary-foreground: var(--surface);
    --fc-monarch-tertiary-over: var(--accent-hover);
    --fc-monarch-tertiary-down: var(--accent-hover);
    --fc-monarch-event: var(--calendar-self);
    --fc-monarch-now: var(--accent);
    --fc-monarch-highlight: var(--accent-wash);
    --fc-monarch-outline: var(--accent);
}

#calendar-grid,
#calendar-mini {
    font-family: var(--font-sans);
    font-size: 0.875rem;
}
/* The mini month sits plain on the page, as on the board: no card behind it. */
#calendar-mini {
    --fc-monarch-background: transparent;
}

/* The grid is a card. */
#calendar-grid .cal-view {
    border: thin solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
}

/* A time grid's column head: the weekday over the date, today's in the accent. */
#calendar-grid .cal-dayhead-inner {
    margin: var(--space-2) 0;
}
#calendar-grid .cal-dayhead-inner > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--space-1) / 4);
}
#calendar-grid .cal-dayhead-dow,
#calendar-grid[data-view="dayGridMonth"] .cal-dayhead-inner {
    font: var(--text-micro);
    letter-spacing: var(--micro-tracking);
    text-transform: uppercase;
    color: var(--ink-2);
}
#calendar-grid .cal-dayhead.is-today .cal-dayhead-dow {
    color: var(--accent);
}
#calendar-grid .cal-dayhead-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--radius-pill);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
#calendar-grid .cal-dayhead.is-today .cal-dayhead-num {
    background: var(--accent);
    color: var(--surface);
}

/* The day route. FullCalendar rewrites the header's classes, so key on the control; !important beats
   skeleton.css's flex-direction: column !important. */
#calendar-grid :has(> .calendar-day-route:not([hidden])) {
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}
/* A list heading's icon sits at the heading column's far edge, so the icons line up down the list. */
#calendar-grid :has(> .calendar-day-route-list:not([hidden])) {
    justify-content: flex-start;
}
#calendar-grid :has(> .calendar-day-route-list:not([hidden])) > :first-child {
    flex-shrink: 0;
}
#calendar-grid .calendar-day-route-list:not([hidden]) {
    margin-left: auto;
}
/* A spacer the icon's width keeps the date centred. Mouse only: a tablet column can't spend 44px twice. */
@media (pointer: fine) {
    #calendar-grid :has(> .calendar-day-route:not([hidden], .calendar-day-route-list, .calendar-day-route-month))::before {
        content: "";
        flex: 0 0 1.625rem;
    }
}
/* A month cell is narrow: its icon keeps a smaller target, left of the date. */
#calendar-grid .cal-celltop .calendar-day-route {
    order: -1;
}
@media (pointer: coarse) {
    #calendar-grid :has(> .calendar-day-route-month:not([hidden])) {
        gap: 0;
    }
    #calendar-grid .calendar-day-route-month .calendar-day-route-link {
        min-width: 1.625rem;
        min-height: 1.875rem;
        padding: 0;
    }
}

/* Hours: two-digit labels on the line, a solid line each hour and a dashed one at the half. */
#calendar-grid .cal-slot-label {
    top: -0.5rem;
    margin-block: 0;
    color: var(--ink-2);
    font-size: 0.75rem;
    line-height: 1rem;
    font-variant-numeric: tabular-nums;
}
#calendar-grid .cal-slot {
    border-color: var(--line-soft);
}
#calendar-grid .cal-slot--minor {
    border-top-style: dashed;
}
#calendar-grid .cal-allday-label {
    color: var(--ink-2);
    font-size: 0.75rem;
}
#calendar-grid .cal-lane,
#calendar-grid .cal-cell {
    border-color: var(--line-soft);
}
/* Outside business hours (nonBusinessHoursClass): weekends and the hours either side of 09–18. The
   fill is laid over the day cells, so a click must pass through it to the grid. */
#calendar-grid .fc-outside-hours {
    background: color-mix(in srgb, var(--ink) 3.5%, transparent);
}
#calendar-grid div:has(> .fc-outside-hours) {
    pointer-events: none;
}
#calendar-grid[data-view="dayGridMonth"] .fc-outside-hours {
    background: color-mix(in srgb, var(--ink) 1.5%, transparent);
}
/* Month continuation arrowheads are inline <svg>; Bootstrap Reboot's `svg { vertical-align: middle }`
   drops them below the bar. */
#calendar-grid svg:has(polygon),
#calendar-mini svg:has(polygon) {
    display: block;
}

/* A chip: a tint of its calendar's colour with a solid left edge, in ink. */
#calendar-grid .cal-chip {
    border: thin solid color-mix(in srgb, var(--fc-event-color) 30%, var(--surface));
    border-radius: calc(var(--radius-control) - 1px);
    background: color-mix(in srgb, var(--fc-event-color) 14%, var(--surface));
    box-shadow: inset calc(var(--space-1) * 3 / 4) 0 0 var(--fc-event-color);
    color: var(--ink);
}
#calendar-grid .cal-chip .calendar-chip-inner {
    padding: var(--space-1) calc(var(--space-1) * 3 / 2) var(--space-1) calc(var(--space-2) + 1px);
    color: var(--ink);
    font-size: 0.78125rem;
    line-height: 1.25;
}
/* Each line keeps its height, with no space of its own; a chip too short for them all clips the last. */
#calendar-grid .cal-chip .calendar-chip-inner > * {
    flex-shrink: 0;
    padding-block: 0;
}
#calendar-grid .cal-chip-title {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#calendar-grid .cal-chip-time {
    color: var(--ink-2);
    font-size: 0.71875rem;
    font-variant-numeric: tabular-nums;
}
/* A short chip reads time, then title, on one line. */
#calendar-grid .cal-chip-short {
    padding-block: 0;
}
#calendar-grid .cal-chip-short .cal-chip-time {
    order: 0;
}
/* The title gives way to the start time and ends in an ellipsis inside its own column. */
#calendar-grid .cal-chip-short .cal-chip-title {
    flex: 0 1 auto;
    min-width: 0;
    order: 1;
}
/* An all-day or banner chip: one line; a colleague's name after the title gives way first. */
#calendar-grid .cal-chip--row .calendar-chip-inner {
    padding-block: calc(var(--space-1) / 2);
    font-size: 0.75rem;
    font-weight: 600;
}
#calendar-grid .cal-chip--row .cal-chip-title {
    flex: 0 1 auto;
    min-width: 0;
}
#calendar-grid .cal-chip--row .calendar-chip-owner--inline {
    flex: 0 1000 auto;
}
/* The name and linked records come after the time, under the title. */
#calendar-grid .cal-chip .calendar-chip-owner,
#calendar-grid .cal-chip .calendar-chip-links {
    order: 2;
}
.calendar-chip-owner {
    overflow: hidden;
    color: var(--ink-2);
    font-size: 0.6875rem;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.calendar-chip-owner--inline {
    flex: 0 100 auto;
    min-width: 0;
    font-size: inherit;
    font-weight: 400;
}
#calendar-grid .cal-chip .calendar-chip-link {
    font-size: 0.6875rem;
}
/* An unanswered invite is white with a dashed edge in its own colour; tentative is striped; an
   absence takes Outlook's purple. */
#calendar-grid .cal-chip.fc-invite-pending {
    border: thin dashed var(--fc-event-color);
    background: var(--surface);
}
#calendar-grid .cal-chip.fc-status-tentative {
    border-color: color-mix(in srgb, var(--fc-event-color) 35%, var(--surface));
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--fc-event-color) 16%, var(--surface)) 0 0.3125rem, var(--surface) 0.3125rem 0.5625rem);
}
/* !important: FullCalendar sets the event's colour inline. */
#calendar-grid .fc-status-oof {
    --fc-event-color: var(--calendar-oof) !important;
}
/* The day shading behind an absence (oof_wash), at full strength in skeleton.css. */
#calendar-grid .fc-status-oof-wash {
    background: color-mix(in srgb, var(--calendar-oof) 8%, transparent);
    opacity: 1;
}
/* Finished events fade; a mouse's hover restores them. Touch has no hover, so a milder fade. */
#calendar-grid .fc-past-event {
    opacity: 0.55;
    transition: opacity 0.15s ease-in-out;
}
#calendar-grid .fc-past-event:hover {
    opacity: 1;
}
@media (hover: none) {
    #calendar-grid .fc-past-event {
        opacity: 0.7;
    }
}

/* A month's timed event and a list row: dot, time, title. */
#calendar-grid .cal-item {
    gap: calc(var(--space-1) * 5 / 4);
    background: none;
    color: var(--ink);
}
#calendar-grid .cal-item-dot {
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    margin: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--fc-event-color);
}
#calendar-grid .cal-item.fc-invite-pending .cal-item-dot {
    background: none;
    box-shadow: inset 0 0 0 calc(var(--space-1) * 3 / 8) var(--fc-event-color);
    outline: thin dashed var(--fc-event-color);
    outline-offset: 1px;
}
#calendar-grid .cal-item-time {
    color: var(--ink-2);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
#calendar-grid .cal-item .calendar-chip-inner {
    min-width: 0;
}
#calendar-grid .cal-item-title {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#calendar-grid .cal-more {
    color: var(--accent);
    font-weight: 600;
}

/* A month cell: the date at the right, today's in the accent; weekends shaded. */
#calendar-grid .cal-celltop {
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--space-1) / 2);
    padding: var(--space-1) var(--space-1) 0;
}
#calendar-grid .cal-daynum,
#calendar-mini .cal-daynum {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
#calendar-grid .cal-daynum.is-today,
#calendar-mini .cal-daynum.is-today {
    background: var(--accent);
    color: var(--surface);
    font-weight: 700;
}

/* The list: each day's heading in a column at the left, its rows beside it. */
#calendar-grid .cal-listday-head {
    flex: none;
    width: 9.375rem;
    max-width: none;
    min-height: 0;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
}
#calendar-grid .cal-listday-text {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font-size: 0.90625rem;
    font-weight: 700;
}
#calendar-grid [aria-current="date"] > .cal-listday-text {
    color: var(--accent);
}
#calendar-grid .cal-listday-alt {
    display: none;
}
#calendar-grid .cal-listday + .cal-listday {
    border-top: thin solid var(--line);
}
#calendar-grid .cal-listday-body {
    gap: 0;
    padding: 0 var(--space-4) 0 0;
}
#calendar-grid[data-view^="list"] .cal-item {
    align-items: center;
    gap: var(--space-3);
    min-height: 2.125rem;
    padding: 0;
    border-radius: 0;
    font-size: 0.875rem;
}
#calendar-grid[data-view^="list"] .cal-item + .cal-item {
    border-top: thin solid var(--line-soft);
}
#calendar-grid[data-view^="list"] .cal-item-dot {
    width: 0.625rem;
    height: 0.625rem;
}
#calendar-grid[data-view^="list"] .calendar-chip-inner {
    display: grid;
    grid-template-columns: 6.75rem minmax(0, 18.75rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
#calendar-grid[data-view^="list"] .cal-item-time {
    width: auto;
    max-width: none;
}
#calendar-grid[data-view^="list"] .calendar-chip-links {
    display: flex;
    gap: var(--space-4);
    min-width: 0;
    overflow: hidden;
}

/* The "+N more" pop-up. */
#calendar-grid .cal-popover {
    border: thin solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
}

/* The mini month: no lines; the date under its weekday letter. */
#calendar-mini * {
    border-color: transparent !important;
}
#calendar-mini .cal-mini-title {
    font-size: 0.90625rem;
    font-weight: 700;
}
#calendar-mini .cal-mini-button {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    color: var(--ink-2);
}
@media (pointer: coarse) {
    #calendar-mini .cal-mini-button {
        width: var(--control-h);
        height: var(--control-h);
    }
}
#calendar-mini .cal-mini-dow {
    color: var(--ink-3);
    font: var(--text-micro);
}
#calendar-mini .cal-celltop {
    justify-content: center;
}
#calendar-mini .cal-daynum {
    width: 1.625rem;
    height: 1.625rem;
    font-weight: 400;
}

/* The phone: the grid runs edge to edge; its week is one-letter heads and title-only chips; its
   month is dates with a dot per calendar; its list stacks each day's heading over its rows. */
@media (max-width: 767.98px) {
    #calendar-grid .cal-view {
        border-width: 0 0 thin;
        border-radius: 0;
    }
    #calendar-grid[data-view="timeGridWeek"] .cal-dayhead-num {
        min-width: 1.625rem;
        height: 1.625rem;
        font-size: 0.9375rem;
    }
    #calendar-grid[data-view="timeGridWeek"] .cal-chip .calendar-chip-inner {
        padding: calc(var(--space-1) * 3 / 4) var(--space-1) calc(var(--space-1) * 3 / 4) calc(var(--space-1) * 3 / 2);
        font-size: 0.65625rem;
    }
    #calendar-grid[data-view="timeGridWeek"] .cal-chip-time {
        display: none;
    }
    #calendar-grid[data-view="timeGridWeek"] .cal-chip--column .cal-chip-title {
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: normal;
    }
    #calendar-grid[data-view="dayGridMonth"] .cal-cell,
    #calendar-grid[data-view="dayGridMonth"] .cal-row {
        border-color: transparent;
    }
    #calendar-grid[data-view="dayGridMonth"] .fc-outside-hours {
        background: none;
    }
    #calendar-grid[data-view="dayGridMonth"] .cal-celltop {
        justify-content: center;
    }
    #calendar-grid[data-view="dayGridMonth"] .cal-daynum {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }
    #calendar-grid[data-view="dayGridMonth"] .calendar-dots {
        margin: calc(var(--space-1) * 3 / 4) 0 var(--space-2);
    }
    #calendar-grid .cal-listday {
        flex-direction: column;
        align-items: stretch;
    }
    #calendar-grid .cal-listday-head {
        width: auto;
        align-items: center;
        padding: var(--space-2) var(--space-3) var(--space-1);
        border-bottom: thin solid var(--line-soft);
        background: var(--page);
    }
    #calendar-grid .cal-listday-text {
        font-size: 0.9375rem;
    }
    #calendar-grid .cal-listday-body {
        padding: 0 var(--space-3);
    }
    #calendar-grid[data-view^="list"] .cal-item {
        align-items: flex-start;
        padding: var(--space-3) 0;
        font-size: 0.9375rem;
    }
    #calendar-grid[data-view^="list"] .cal-item-dot {
        margin-top: 0.375rem;
    }
    #calendar-grid[data-view^="list"] .calendar-chip-inner {
        grid-template-columns: 5.75rem minmax(0, 1fr);
        align-items: start;
        row-gap: calc(var(--space-1) / 2);
    }
    #calendar-grid[data-view^="list"] .cal-item-title {
        white-space: normal;
    }
    #calendar-grid[data-view^="list"] .cal-item-time {
        font-size: 0.875rem;
    }
    #calendar-grid[data-view^="list"] .calendar-chip-links {
        grid-column: 2;
        flex-direction: column;
        gap: calc(var(--space-1) / 2);
    }
}