/* Change list: toolbar, table, cards, filters panel and sticky footer. Mobile first. */
.cl { display: flex; flex-direction: column; gap: calc(var(--m-space) * 3); }
.cl__tools { display: flex; flex-direction: column; gap: calc(var(--m-space) * 2.5); padding: calc(var(--m-space) * 3); min-width: 0; overflow-x: clip; background: var(--m-surface-2); border: 1px solid var(--m-border); border-radius: var(--m-radius); }
.cl__tools-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--m-space) * 2.5); min-width: 0; }
.cl__tools-row:empty { display: none; }
.cl__search { flex: 1 1 100%; max-width: none; min-width: 0; }
.cl__tools-row--quick { flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }  /* the Filters button drops to its own line when the quick filters need the width */
.cl__tools-row--quick .cl__filters-toggle { margin-left: auto; }
.search-field--page input { background: var(--m-surface); border-color: var(--m-border-strong); color: var(--m-fg-strong); min-height: 2.5rem; padding-right: 2.5rem; }
.search-field--page .search-field__icon { color: var(--m-fg-muted); }
.search-field__end { position: absolute; right: .5rem; top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: calc(var(--m-space) * 1); }
.search-field__clear { color: var(--m-fg-muted); padding: .25rem; }
.search-field--page:has(.search-field__tools) input { padding-right: var(--search-tools-width, 12rem); }
.cl__quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: calc(var(--m-space) * 2.5); min-width: 0; flex: 1 1 0; max-width: 100%; margin-left: 0; }  /* basis 0: the Filters button keeps its place on the line and the filters wrap inside */
.cl__chips:empty { display: none; }
.cl__tools-row > .segmented { margin-left: auto; }
.cl__tools-row--stacked .cl__filters-toggle { margin-left: auto; }
.segmented { display: inline-flex; border: 1px solid var(--m-border-strong); border-radius: var(--m-radius); overflow: hidden; background: var(--m-surface); }
.segmented__item { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.5); padding: 0 calc(var(--m-space) * 3); min-height: 2.4rem; color: var(--m-fg-muted); font-size: var(--m-font-size-sm); font-weight: 500; text-decoration: none; }
.segmented__item + .segmented__item { border-left: 1px solid var(--m-border); }
.segmented__item:hover { background: var(--m-surface-3); text-decoration: none; color: var(--m-fg-strong); }
.segmented__item--active { background: var(--m-primary-soft); color: var(--m-primary-ink); }
.segmented__label { display: none; }
@media (max-width: 47.99rem) { .segmented[data-defaults] .segmented__item:not([data-devices~="mobile"]) { display: none; } }
@media (min-width: 48rem) and (max-width: 79.99rem) { .segmented[data-defaults] .segmented__item:not([data-devices~="tablet"]) { display: none; } }
@media (min-width: 80rem) { .segmented[data-defaults] .segmented__item:not([data-devices~="desktop"]) { display: none; } }
.segmented--single { display: none; }
.cl__filters-toggle .badge { margin-left: calc(var(--m-space) * 1); }

.chip { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.5); padding: 0 calc(var(--m-space) * 2.5); min-height: 1.85rem; border-radius: var(--m-radius-pill); border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-fg); font-size: var(--m-font-size-xs); font-weight: 500; text-decoration: none; white-space: nowrap; }
.chip:hover { text-decoration: none; border-color: var(--m-border-strong); background: var(--m-surface-3); }
.chip--active { background: var(--m-primary); border-color: var(--m-primary); color: var(--m-primary-contrast); }
.chip--filter { background: var(--m-primary-soft); border-color: transparent; color: var(--m-primary-ink); max-width: 100%; }
.chip--filter > .chip__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip--filter { overflow: hidden; }
.chip__key { opacity: .75; }
.chip__remove { font-size: var(--m-font-size-2xs); opacity: .7; }
.chip--filter:hover .chip__remove { opacity: 1; }
.chip--clear { border-style: dashed; color: var(--m-fg-muted); }
.cl__chips { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 1.5); }
.cl__dates { display: flex; align-items: center; gap: calc(var(--m-space) * 2); }
.cl__dates-title { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); text-transform: uppercase; letter-spacing: .03em; }
.cl__dates-trigger { min-height: 2.25rem; }
.cl__dates-trigger--active { background: var(--m-primary-soft); border-color: var(--m-primary); color: var(--m-primary-ink); }
.cl__dates-menu { width: min(30rem, calc(100vw - 2rem)); max-height: min(28rem, 70vh); overflow: auto; }
.cl__dates-header { padding-block: calc(var(--m-space) * 1.5); }
.cl__dates-back { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.5); font-size: var(--m-font-size-sm); font-weight: 500; }
.cl__dates-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.cl__dates-choices .dropdown__item { justify-content: center; text-align: center; }
.cl__dates-footer { flex-direction: row; justify-content: flex-end; padding-bottom: 0; }
/* Phones: the filters toggle is an icon with its count as a corner badge */
.cl__filters-toggle > span:not(.badge) { display: none; }
.cl__filters-toggle { position: relative; width: 2.5rem; padding-inline: 0; margin-left: auto; }
.cl__filters-toggle .badge { position: absolute; top: -.4rem; right: -.4rem; min-height: 1.1rem; padding-inline: .35rem; font-size: var(--m-font-size-2xs); margin: 0; }
@media (min-width: 48rem) {
  .cl__search { flex: 1 1 16rem; max-width: 26rem; }
  .cl__tools-row--stacked .cl__search { max-width: none; flex-basis: 100%; }
  .cl__quick { width: auto; justify-content: flex-end; margin-left: auto; }
  .cl__tools-row--quick .cl__quick, .cl__tools-row--stacked .cl__quick { width: 100%; justify-content: flex-start; margin-left: 0; }
  .cl__tools-row--quick .cl__quick { width: auto; flex: 1 1 0; }  /* basis 0: the Filters button stays on the line, the filters wrap inside */
  .cl__dates-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl__filters-toggle > span:not(.badge) { display: inline; }
  .cl__filters-toggle { position: static; width: auto; padding-inline: calc(var(--m-space) * 3.5); }
  .cl__filters-toggle .badge { position: static; min-height: 1.35rem; padding-inline: calc(var(--m-space) * 2); font-size: var(--m-font-size-xs); margin-left: calc(var(--m-space) * 1); }
}

.cl__layout { position: relative; display: flex; align-items: flex-start; gap: calc(var(--m-space) * 4); }
.cl__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--m-space) * 3); }
.cl__form { display: flex; flex-direction: column; min-width: 0; }

.tabs { display: flex; gap: calc(var(--m-space) * 1); border-bottom: 1px solid var(--m-border); overflow-x: auto; scrollbar-width: none; }
.tabs__item { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.5); padding: calc(var(--m-space) * 2) calc(var(--m-space) * 3); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--m-fg-muted); font-weight: 500; font-size: var(--m-font-size-sm); white-space: nowrap; text-decoration: none; }
.tabs__item:hover { color: var(--m-fg-strong); text-decoration: none; }
.tabs__item--active { color: var(--m-primary-ink); border-bottom-color: var(--m-primary); }

/* Table */
.cl__table-wrap { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius) var(--m-radius) 0 0; overflow: auto; max-height: calc(100dvh - 14rem); scrollbar-width: thin; }
/* Every cell paints --cell-bg (sticky cells need an opaque background); the row states
   (hover, selected, errors, sections, header) only change the variable on the row. */
.cl-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: var(--m-font-size-sm); --cell-bg: var(--m-surface); }
.cl-table th, .cl-table td { padding: calc(var(--m-space) * 2.5) calc(var(--m-space) * 3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--m-border); white-space: nowrap; background: var(--cell-bg); background-clip: padding-box; }
.cl-table thead { --cell-bg: var(--m-surface-2); }
.cl-table thead th { position: sticky; top: 0; z-index: calc(var(--m-z-sticky) + 1); color: var(--m-fg-muted); font-size: var(--m-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.cl-table tbody tr:hover { --cell-bg: var(--m-surface-2); }
.cl-table tbody tr:last-child td { border-bottom: 0; }
.cl-table td a { color: var(--m-fg-strong); font-weight: 500; }
.cl-table td a:hover { color: var(--m-primary-ink); }
.cl-table .action-checkbox-column, .cl-table .action-checkbox { width: 2.5rem; min-width: 2.5rem; box-sizing: border-box; padding-inline: calc(var(--m-space) * 2.5) 0; }
.cl-table--selectable th:first-child, .cl-table--selectable td:first-child { position: sticky; left: 0; z-index: var(--m-z-sticky); }
.cl-table--selectable th:nth-child(2), .cl-table--selectable td:nth-child(2) { position: sticky; left: var(--cl-sticky-left, 2.5rem); z-index: var(--m-z-sticky); box-shadow: 4px 0 6px -4px var(--m-shadow-edge); }
.cl-table--selectable thead th:first-child, .cl-table--selectable thead th:nth-child(2) { z-index: calc(var(--m-z-sticky) + 2); }
.cl-table tr:has(.action-select:checked) { --cell-bg: var(--m-primary-soft); }
.cl-table__row--errors { --cell-bg: color-mix(in oklab, var(--m-danger), transparent 92%); }
.cl-table__errors td { color: var(--m-danger-ink); }
.cl-table__header { display: flex; align-items: center; gap: calc(var(--m-space) * 1); }
.cl-table__sort { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.5); color: inherit; font-weight: 600; }
.cl-table__sort:hover { color: var(--m-fg-strong); text-decoration: none; }
.cl-table__header--sorted .cl-table__sort { color: var(--m-primary-ink); }
.cl-table__sort-icon { font-size: var(--m-font-size-xs); }
.cl-table__priority { display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem; border-radius: var(--m-radius-pill); background: var(--m-primary); color: var(--m-primary-contrast); font-size: var(--m-font-size-2xs); }
.cl-table__menu { border: 0; background: none; color: var(--m-fg-muted); cursor: pointer; padding: .2rem .35rem; border-radius: var(--m-radius); opacity: 0; transition: opacity .15s; }
.cl-table th:hover .cl-table__menu, .cl-table__menu:focus-visible, .cl-table__header[x-data] .cl-table__menu[aria-expanded="true"] { opacity: 1; }
.cl-table__menu:hover { background: var(--m-surface-3); color: var(--m-fg-strong); }
.cl-table__select-all { display: flex; }
.cl-table .cl-table__menu-col, .cl-table .cl-table__menu-cell { position: sticky; right: 0; width: 2.5rem; padding-inline: calc(var(--m-space) * 1.5); box-shadow: -4px 0 6px -4px var(--m-shadow-edge); text-align: center; }
.cl-table thead .cl-table__menu-col { z-index: calc(var(--m-z-sticky) + 2); }
.row-menu__toggle { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--m-radius); background: none; color: var(--m-fg-muted); cursor: pointer; flex-shrink: 0; }
.row-menu__toggle:hover, .row-menu__toggle[aria-expanded="true"] { background: var(--m-surface-3); color: var(--m-fg-strong); }
.row-menu__menu { text-transform: none; letter-spacing: 0; font-weight: 400; min-width: 14rem; z-index: var(--m-z-popover); }
.row-menu__link { display: flex; flex-direction: column; line-height: 1.25; }
.row-menu__link-label { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
.cl-card .row-menu { position: absolute; top: calc(var(--m-space) * 2.5); right: calc(var(--m-space) * 8); }
.cl-table .dropdown__menu { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--m-font-size-sm); }
.cl-table img.cell-image { display: block; }
.cl-table input:not([type="checkbox"]), .cl-table select { min-height: 2.1rem; padding: calc(var(--m-space) * 1) calc(var(--m-space) * 2); min-width: 6rem; }
.cl-table .errorlist { margin: 0 0 .25rem; padding: 0; list-style: none; color: var(--m-danger-ink); font-size: var(--m-font-size-xs); white-space: normal; }
.cell-header { display: flex; align-items: center; gap: calc(var(--m-space) * 2.5); }
.cell-header__avatar, .cell-header__initials { width: 2.25rem; height: 2.25rem; border-radius: var(--m-radius); object-fit: cover; flex-shrink: 0; }
.cell-header__avatar--round, .cell-image--round { border-radius: var(--m-radius-pill); }
.cell-header__initials { display: grid; place-items: center; background: var(--m-primary-soft); color: var(--m-primary-ink); font-weight: 600; font-size: var(--m-font-size-xs); }
.cell-header__text { display: flex; flex-direction: column; line-height: 1.3; }
.cell-header__title { font-weight: 600; color: var(--m-fg-strong); }
.cell-header__subtitle { color: var(--m-fg-muted); font-size: var(--m-font-size-xs); }
.cell-image { max-height: 3rem; border-radius: var(--m-radius); }

/* A table without a Cards view becomes cards on narrow screens (no second template).
   .cl-table.cl-table--responsive outranks the sticky-column selectors above without !important. */
@media (max-width: 47.99rem) {
  .cl__table-wrap:has(.cl-table--responsive) { overflow: visible; max-height: none; background: none; border: 0; }
  .cl-table--responsive, .cl-table--responsive tbody, .cl-table--responsive tr, .cl-table--responsive td, .cl-table--responsive tbody th { display: block; }
  .cl-table--responsive thead { display: none; }
  .cl-table--responsive tr.cl-table__row { position: relative; margin-bottom: calc(var(--m-space) * 3); padding: calc(var(--m-space) * 3) calc(var(--m-space) * 3.5); background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); }
  .cl-table.cl-table--responsive td, .cl-table.cl-table--responsive tbody th { padding: calc(var(--m-space) * 1) 0; border: 0; white-space: normal; display: flex; justify-content: space-between; gap: calc(var(--m-space) * 3); position: static; box-shadow: none; }
  .cl-table--responsive, .cl-table--responsive tbody tr:hover, .cl-table--responsive tr:has(.action-select:checked) { --cell-bg: transparent; }
  .cl-table--responsive td[data-label]::before, .cl-table--responsive tbody th[data-label]::before { content: attr(data-label); color: var(--m-fg-muted); font-size: var(--m-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
  .cl-table--responsive tr.cl-table__row { padding-right: calc(var(--m-space) * 14); }
  .cl-table.cl-table--responsive td.action-checkbox { position: absolute; top: calc(var(--m-space) * 3.5); right: calc(var(--m-space) * 3.5); left: auto; width: auto; padding: 0; }
  .cl-table--responsive td.action-checkbox::before { content: none; }
  .cl-table.cl-table--responsive td.cl-table__menu-cell { position: absolute; top: calc(var(--m-space) * 2.5); right: calc(var(--m-space) * 8.5); left: auto; width: auto; padding: 0; box-shadow: none; }
  .cl-table--responsive td.cl-table__menu-cell::before { content: none; }
  .cl-table--responsive td[data-label=""]:not(.action-checkbox), .cl-table--responsive tbody th[data-label=""] { font-size: var(--m-font-size-lg); font-weight: 600; }
  .cl-table--responsive tr:has(.action-select:checked) { border-color: var(--m-primary); }
}

@media (max-width: 47.99rem) {
  /* On phones only the checkbox column stays pinned to the left (like the row menu on the right);
     the first data column scrolls. Header cells keep sticking to the top. */
  .cl-table--selectable tbody :is(th, td):nth-child(2) { position: static; box-shadow: none; }
  .cl-table--selectable thead th:nth-child(2) { left: auto; z-index: calc(var(--m-z-sticky) + 1); box-shadow: none; }
  .cl__chips .chip--filter { max-width: 100%; }
}

/* Cards view */
/* Cards and boards scroll under the sticky bottom bar: keep the last row reachable */
.cl-cards { display: grid; gap: calc(var(--m-space) * 3); grid-template-columns: repeat(auto-fill, minmax(var(--cl-card-min, 17rem), 1fr)); padding-bottom: calc(var(--m-bottombar-height) + var(--m-space) * 2); }
.cl-card--image { padding-top: 0; }
.cl-card__image { display: block; margin: 0 calc(var(--m-space) * -3.5) calc(var(--m-space) * 2); aspect-ratio: 4 / 3; overflow: hidden; background: var(--m-surface-2); border-radius: var(--m-radius) var(--m-radius) 0 0; }
.cl-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-card { --card-padding: calc(var(--m-space) * 3.5); --card-gap: calc(var(--m-space) * 1.5); --card-control-height: 2rem; --card-separator: var(--m-border); position: relative; display: flex; flex-direction: column; gap: var(--card-gap); padding: var(--card-padding); background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); }
.cl-card:has(.action-select:checked) { border-color: var(--m-primary); box-shadow: var(--m-ring); }
.cl-card--errors { border-color: var(--m-danger); }
.cl-card__select { position: absolute; top: calc(var(--m-space) * 3); right: calc(var(--m-space) * 3); }
.cl-card__title { font-size: 1rem; padding-right: 2rem; }
.cl-card__title a { color: var(--m-fg-strong); }
.cl-card__badge { display: inline-flex; }
.cl-card__row { display: flex; justify-content: space-between; gap: calc(var(--m-space) * 3); font-size: var(--m-font-size-sm); }
.cl-card__label { color: var(--m-fg-muted); font-size: var(--m-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
.cl-card__value { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.cl-card__value a { color: var(--m-fg-strong); }

/* Sticky footer: pagination + bulk actions + save */
.cl__footer { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 2) calc(var(--m-space) * 4); }
.cl__footer-pagination { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 3); }
.cl__per-page .dropdown__menu { min-width: 9rem; }
.cl__pagination { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 1); font-size: var(--m-font-size-sm); color: var(--m-fg-muted); }
.cl__page { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 calc(var(--m-space) * 1.5); border-radius: var(--m-radius); color: var(--m-fg); text-decoration: none; }
.cl__page:hover { background: var(--m-surface-3); text-decoration: none; }
.cl__page--current { background: var(--m-primary); color: var(--m-primary-contrast); font-weight: 600; }
.cl__page--ellipsis { color: var(--m-fg-muted); }
.cl__count { margin-left: calc(var(--m-space) * 2); white-space: nowrap; }
.cl__showall { margin-left: calc(var(--m-space) * 2); font-size: var(--m-font-size-xs); }
.cl__actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 2); min-width: 0; }
.cl__actions label { display: contents; }
.cl__actions-menu .dropdown__menu { min-width: 14rem; }
.cl__actions .button { min-height: 2.25rem; }
.cl__actions-count { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 1.5); font-size: var(--m-font-size-sm); }
.cl__actions-link { border: 0; background: none; color: var(--m-primary-ink); font: inherit; font-size: var(--m-font-size-xs); cursor: pointer; text-decoration: underline; padding: 0; }
.cl__footer-save { margin-left: auto; }

.cl-table__menu-cell--buttons { width: auto; white-space: nowrap; }
.cl-table__menu-cell--buttons .row-menu { display: inline-flex; vertical-align: middle; }
.row-action { width: 2rem; height: 2rem; color: var(--m-fg-muted); vertical-align: middle; }
.row-action:hover { color: var(--m-primary-ink); background: var(--m-primary-soft); }
.row-action--danger:hover { color: var(--m-danger-ink); background: var(--m-danger-soft); }

.cl-table__handle { vertical-align: middle; margin-right: calc(var(--m-space) * .5); }
.cl-table__row--dragging td { opacity: .5; }
.cl-table--sortable .cl-table__menu-col, .cl-table--sortable .cl-table__menu-cell { width: 4.5rem; }
.cell-affix { color: var(--m-fg-muted); font-size: var(--m-font-size-xs); }
.cell-affix--prefix { margin-right: .25em; }
.cell-affix--suffix { margin-left: .25em; }

/* Column priority: ``list_column_priority`` hides columns below their device class
   (!important: the responsive card mode above sets display on every cell) */
@media (max-width: 47.99rem) { .cl-table [data-device="tablet"], .cl-table [data-device="desktop"] { display: none !important; } }
@media (max-width: 79.99rem) { .cl-table [data-device="desktop"] { display: none !important; } }

/* Filters panel: drawer on small screens, side panel on wide ones */
.cl__filters-backdrop { position: fixed; inset: 0; z-index: calc(var(--m-z-panel) - 1); background: var(--m-backdrop); }
.cl__filters { position: fixed; inset: 0 0 0 auto; z-index: var(--m-z-panel); width: min(22rem, 90vw); display: flex; flex-direction: column; background: var(--m-surface); border-left: 1px solid var(--m-border); box-shadow: var(--m-shadow-lg); transform: translateX(100%); transition: transform .2s ease; }
.cl__filters--open { transform: none; }
.cl__filters-header { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--m-space) * 2); padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); border-bottom: 1px solid var(--m-border); }
.cl__filters-header h2 { font-size: 1rem; }
.cl__filters-actions { display: flex; align-items: center; gap: calc(var(--m-space) * 1); }
.cl__filters-body { flex: 1; overflow-y: auto; padding: calc(var(--m-space) * 1) calc(var(--m-space) * 2); scrollbar-width: thin; }
.cl__filters-footer { padding: calc(var(--m-space) * 3); border-top: 1px solid var(--m-border); }
.filter { border-bottom: 1px solid var(--m-border); }
.filter:last-child { border-bottom: 0; }
.filter__summary { display: flex; align-items: center; gap: calc(var(--m-space) * 2); padding: calc(var(--m-space) * 2.5) calc(var(--m-space) * 2); cursor: pointer; list-style: none; font-weight: 600; font-size: var(--m-font-size-sm); color: var(--m-fg-strong); }
.filter__summary::-webkit-details-marker { display: none; }
.filter__title { flex: 1; }
.filter__active { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
.filter__chevron { font-size: var(--m-font-size-2xs); color: var(--m-fg-muted); transition: transform .2s; }
.filter[open] .filter__chevron { transform: rotate(180deg); }
.filter__choices { list-style: none; padding: 0 calc(var(--m-space) * 2) calc(var(--m-space) * 2.5); display: flex; flex-direction: column; gap: 2px; }
.filter__choice { display: block; padding: calc(var(--m-space) * 1.25) calc(var(--m-space) * 2.5); border-radius: var(--m-radius-sm); color: var(--m-fg); font-size: var(--m-font-size-sm); text-decoration: none; }
.filter__choice:hover { background: var(--m-surface-3); text-decoration: none; }
.filter__choice--selected { background: var(--m-primary-soft); color: var(--m-primary-ink); font-weight: 600; }

@media (min-width: 48rem) { .segmented__label { display: inline; } }
@media (min-width: 80rem) {
  .cl__filters-backdrop, .cl__filters-close { display: none !important; }  /* !important: the backdrop is toggled inline by x-show */
  .cl__filters { position: sticky; top: calc(var(--m-topbar-height) + 1rem); inset: auto; z-index: var(--m-z-sticky); width: 17rem; flex-shrink: 0; max-height: calc(100dvh - var(--m-topbar-height) - 2rem); transform: none; border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); }
  .cl--full .cl__filters, .cl--filters-hidden .cl__filters { display: none; }
}

/* Form filters */
.cl__filters-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cl__filters-footer { display: flex; flex-direction: column; gap: calc(var(--m-space) * 2); }
.cl__filters-footer:empty { display: none; }
.filter__body { padding: 0 calc(var(--m-space) * 2) calc(var(--m-space) * 3); display: flex; flex-direction: column; gap: calc(var(--m-space) * 2); }
.filter__clear { color: var(--m-fg-muted); font-size: var(--m-font-size-xs); padding: .15rem .35rem; border-radius: var(--m-radius); }
.filter__clear:hover { color: var(--m-danger-ink); background: var(--m-surface-3); text-decoration: none; }
.filter__field { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1); }
.filter__input, .filter__field input:not([type="checkbox"], [type="radio"]), .filter__field select { width: 100%; min-height: 2.25rem; padding-block: calc(var(--m-space) * 1.25); font-size: var(--m-font-size-sm); }
.filter__range { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--m-space) * 2); }
.filter__range:has(.datepicker) { grid-template-columns: 1fr; }  /* date inputs need the full width */
.filter__range-field { display: flex; flex-direction: column; gap: calc(var(--m-space) * .75); min-width: 0; }
.filter__range-field input { width: 100%; min-height: 2.25rem; padding: calc(var(--m-space) * 1) calc(var(--m-space) * 2); font-size: var(--m-font-size-sm); }
.filter__range-label { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.filter__options { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.filter__option input { width: 1.05rem; height: 1.05rem; min-height: 0; flex-shrink: 0; }
.filter__option { display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--m-space) * 2.5); padding: calc(var(--m-space) * 1.25) calc(var(--m-space) * 2); border-radius: var(--m-radius-sm); font-size: var(--m-font-size-sm); cursor: pointer; }
.filter__option:hover { background: var(--m-surface-3); }
.filter__option--selected { color: var(--m-primary-ink); font-weight: 600; }
.segmented--filter { display: flex; width: 100%; }
.segmented--filter .segmented__item { flex: 1; justify-content: center; cursor: pointer; position: relative; }
.segmented--filter input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmented--filter .segmented__item:has(input:focus-visible) { box-shadow: var(--m-focus); }
.segmented--filter .segmented__item:has(input:checked) { background: var(--m-primary-soft); color: var(--m-primary-ink); }
.cl__horizontal { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 3); min-width: 0; max-width: 100%; }
.cl__horizontal .filter { display: flex; align-items: center; gap: calc(var(--m-space) * 2); border: 0; }
.cl__horizontal .filter__summary { padding: 0; pointer-events: none; font-size: var(--m-font-size-xs); color: var(--m-fg-muted); text-transform: uppercase; letter-spacing: .03em; }
.cl__horizontal .filter__summary .filter__chevron { display: none; }
.cl__horizontal .filter__body { padding: 0; }
.cl__horizontal .filter__input, .cl__horizontal .filter__field select, .cl__horizontal .filter__field input:not([type="checkbox"], [type="radio"]) { min-height: 2.25rem; width: auto; min-width: 9rem; }
.cl__horizontal .segmented--filter { width: auto; display: inline-flex; }
.cl__horizontal-apply { min-height: 2.25rem; padding-block: 0; font-size: var(--m-font-size-xs); }
.cl__horizontal .segmented--filter .segmented__item { flex: 0 0 auto; min-height: 2.25rem; padding: 0 calc(var(--m-space) * 3); font-size: var(--m-font-size-xs); }
.cl__horizontal .filter__range { display: flex; flex-wrap: wrap; min-width: 0; }
.cl__horizontal .filter__range-label { display: none; }

/* Double range slider */
.filter__slider { display: flex; flex-direction: column; gap: calc(var(--m-space) * 3); }
.slider { position: relative; height: 1.25rem; --slider-from: 0%; --slider-to: 100%; }
.slider::before { content: ""; position: absolute; inset: 50% 0 auto; height: 4px; translate: 0 -50%; border-radius: var(--m-radius-pill); background: linear-gradient(to right, var(--m-border-strong) var(--slider-from), var(--m-primary) var(--slider-from), var(--m-primary) var(--slider-to), var(--m-border-strong) var(--slider-to)); }
.slider input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; appearance: none; pointer-events: none; }
.slider input[type="range"]::-webkit-slider-thumb { appearance: none; width: 1.1rem; height: 1.1rem; border-radius: var(--m-radius-pill); background: var(--m-surface); border: 2px solid var(--m-primary); box-shadow: var(--m-shadow); pointer-events: auto; cursor: grab; }
.slider input[type="range"]::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: var(--m-radius-pill); background: var(--m-surface); border: 2px solid var(--m-primary); pointer-events: auto; cursor: grab; }
.slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.slider input[type="range"]::-moz-range-track { background: transparent; }

/* Combobox */
.combobox { position: relative; }
.combobox__control { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 1); min-height: 2.5rem; padding: calc(var(--m-space) * 1) 2.25rem calc(var(--m-space) * 1) calc(var(--m-space) * 2); background: var(--m-surface); border: 1px solid var(--m-border-strong); border-radius: var(--m-radius); cursor: text; }
.combobox__control:focus-within { border-color: var(--m-primary); box-shadow: var(--m-focus); }
.combobox__token { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1); padding: 0 calc(var(--m-space) * 1) 0 calc(var(--m-space) * 2); min-height: 1.6rem; border-radius: var(--m-radius-pill); background: var(--m-primary-soft); color: var(--m-primary-ink); font-size: var(--m-font-size-xs); font-weight: 600; max-width: 100%; }
.combobox__token span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox__remove { border: 0; background: none; color: inherit; cursor: pointer; padding: .1rem .25rem; font-size: var(--m-font-size-2xs); opacity: .7; }
.combobox__remove:hover { opacity: 1; }
/* .combobox__control > input: outranks the contextual input rules of filters and table cells */
.combobox__control > input.combobox__input { flex: 1; min-width: 4rem; border: 0; background: none; padding: 0; min-height: 1.6rem; box-shadow: none; font-size: var(--m-font-size-sm); }
.combobox__icon { position: absolute; right: .75rem; top: .8rem; color: var(--m-fg-muted); font-size: var(--m-font-size-xs); pointer-events: none; }
.combobox__list { position: absolute; z-index: var(--m-z-popover); left: 0; right: 0; margin-top: calc(var(--m-space) * 1); max-height: 16rem; overflow: auto; list-style: none; padding: calc(var(--m-space) * 1); background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow-lg); }
.combobox__option, .combobox__empty, .combobox__more { padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 2.5); border-radius: var(--m-radius-sm); font-size: var(--m-font-size-sm); cursor: pointer; }
.combobox__option--active { background: var(--m-surface-3); }
.combobox__option--selected { color: var(--m-primary-ink); font-weight: 600; }
.combobox__empty { color: var(--m-fg-muted); cursor: default; }
.combobox__more { color: var(--m-primary-ink); font-weight: 500; text-align: center; }

/* Tablet and desktop: the list page fills the viewport and only the results scroll, so the
   footer (pagination, bulk actions) is always visible without relying on sticky positioning. */
@media (min-width: 48rem) {
  body.change-list .page { flex: 0 0 auto; min-height: 0; height: calc(100dvh - var(--m-topbar-height)); overflow: auto; }
  body.change-list .page__header { flex: 0 0 auto; }
  body.change-list .page__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .cl { flex: 1 1 auto; min-height: 0; }
  .cl > *:not(.cl__layout), .cl__tools { flex: 0 0 auto; }  /* only the results may shrink */
  .cl__layout { flex: 1 1 auto; min-height: 0; }
  .cl__main { min-height: 0; align-self: stretch; }
  .cl__form { flex: 1 1 auto; min-height: 0; }
  .cl__table-wrap { flex: 1 1 auto; min-height: 12rem; max-height: none; }
  .cl-cards { flex: 1 1 auto; min-height: 12rem; overflow: auto; align-content: start; padding: 2px; }
}
@media (min-width: 80rem) {
  .cl__footer--aside { padding-right: calc(17rem + var(--m-space) * 4); }  /* keep clear of the filters panel */
  .cl__filters { position: static; align-self: stretch; max-height: none; display: flex; flex-direction: column; }
  .cl__filters-body { flex: 1 1 auto; min-height: 0; }
}

/* Kanban view */
.kanban { display: flex; gap: calc(var(--m-space) * 3); align-items: flex-start; overflow-x: auto; padding-bottom: calc(var(--m-space) * 2); scroll-snap-type: x proximity; }
.kanban__column { flex: 0 0 18rem; max-width: 18rem; display: flex; flex-direction: column; border-radius: var(--m-radius); background: var(--m-surface-2); border: 1px solid var(--m-border); scroll-snap-align: start; --kanban-accent: var(--m-fg-muted); }
.kanban__column--primary { --kanban-accent: var(--m-primary); } .kanban__column--success { --kanban-accent: var(--m-success); } .kanban__column--warning { --kanban-accent: var(--m-warning); } .kanban__column--danger { --kanban-accent: var(--m-danger); } .kanban__column--info { --kanban-accent: var(--m-info); }
.kanban__column--over { outline: 2px dashed var(--kanban-accent); outline-offset: -2px; background: color-mix(in oklab, var(--kanban-accent) 8%, var(--m-surface-2)); }
.kanban__column--blocked { opacity: .45; }
.kanban__column--blocked.kanban__column--over { outline-color: var(--m-danger); cursor: not-allowed; }
.kanban__column--locked .kanban__header { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in oklab, var(--m-fg) 6%, transparent) 6px 8px); }
.kanban__lock { margin-right: .4rem; color: var(--m-fg-muted); font-size: .8em; }
.kanban__header { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--m-space) * 2); padding: calc(var(--m-space) * 2.5) calc(var(--m-space) * 3); border-bottom: 3px solid var(--kanban-accent); }
.kanban__title { margin: 0; font-size: var(--m-font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--m-fg-strong); }
.kanban__cards { display: flex; flex-direction: column; gap: calc(var(--m-space) * 2); padding: calc(var(--m-space) * 2.5); min-height: 6rem; max-height: calc(100vh - 20rem); overflow-y: auto; }
.kanban__card { position: relative; display: flex; flex-direction: column; gap: calc(var(--m-space) * 1); padding: calc(var(--m-space) * 2.5) calc(var(--m-space) * 3); background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); }
.kanban__card[draggable="true"] { cursor: grab; }
.kanban__card--dragging { opacity: .5; }
.kanban__card--moved { border-color: var(--kanban-accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--kanban-accent) 35%, transparent); }
.kanban__card:has(.action-select:checked) { border-color: var(--m-primary); box-shadow: var(--m-ring); }
.kanban__image { width: 100%; max-height: 8rem; object-fit: cover; border-radius: var(--m-radius); }
.kanban__tools { position: absolute; top: calc(var(--m-space) * 1.5); right: calc(var(--m-space) * 1.5); display: flex; gap: calc(var(--m-space) * .5); }
.kanban__tools .row-menu { position: static; }
.kanban__select { display: inline-flex; }
.kanban__card-title { margin: 0; padding-right: 4rem; font-size: .95rem; font-weight: 600; }
.kanban__card-title a { color: var(--m-fg-strong); }
.kanban__badge { display: inline-flex; }
.kanban__row { display: flex; justify-content: space-between; gap: calc(var(--m-space) * 2); font-size: var(--m-font-size-sm); }
.kanban__label { color: var(--m-fg-muted); }
.kanban__value { text-align: right; min-width: 0; }
.kanban__more, .calendar__empty { margin: 0; padding: calc(var(--m-space) * 1); font-size: var(--m-font-size-xs); color: var(--m-fg-muted); text-align: center; }
.kanban__sections, .cl-card__sections { font-size: var(--m-font-size-sm); }
.kanban__sections summary, .cl-card__sections summary { cursor: pointer; color: var(--m-fg-muted); }

/* Calendar view */
.calendar { display: flex; flex-direction: column; gap: calc(var(--m-space) * 3); }
.calendar__bar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 3); }
.calendar__nav { display: flex; align-items: center; gap: calc(var(--m-space) * 1); }
.calendar__heading { margin: 0; flex: 1; font-size: 1.1rem; font-weight: 600; color: var(--m-fg-strong); }
.calendar__heading small { font-weight: 400; color: var(--m-fg-muted); font-size: var(--m-font-size-sm); }
.calendar .segmented__label--always { display: inline; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--m-border); border: 1px solid var(--m-border); border-radius: var(--m-radius); overflow: hidden; }
.calendar__weekday { padding: calc(var(--m-space) * 1.5); background: var(--m-surface-2); font-size: var(--m-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--m-fg-muted); text-align: center; }
.calendar__day { min-height: 4rem; padding: 2px; background: var(--m-surface); display: flex; flex-direction: column; gap: calc(var(--m-space) * 1); min-width: 0; cursor: pointer; }  /* tapping a day opens its agenda */
.calendar--week .calendar__day { min-height: 16rem; }
.calendar__day--outside { background: var(--m-surface-2); color: var(--m-fg-muted); }
.calendar__day--today .calendar__date { background: var(--m-primary); color: var(--m-primary-contrast); }
.calendar__date { align-self: flex-end; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--m-radius-pill); font-size: var(--m-font-size-xs); font-weight: 600; }
/* Phones: events are coloured dots in a row; from 48rem they are labelled bars */
.calendar__events { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px; }
.calendar__event { display: flex; gap: calc(var(--m-space) * 1); width: .6rem; height: .6rem; padding: 0; border-radius: var(--m-radius-pill); font-size: var(--m-font-size-xs); color: var(--m-fg-strong); background: var(--cal-accent, var(--m-primary)); border-left: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.calendar__event:hover { background: color-mix(in oklab, var(--cal-accent, var(--m-primary)) 28%, var(--m-surface)); text-decoration: none; }
.calendar__event--primary { --cal-accent: var(--m-primary); } .calendar__event--success { --cal-accent: var(--m-success); } .calendar__event--warning { --cal-accent: var(--m-warning); } .calendar__event--danger { --cal-accent: var(--m-danger); } .calendar__event--info { --cal-accent: var(--m-info); } .calendar__event--secondary { --cal-accent: var(--m-fg-muted); }
.calendar__event--continues { border-left-style: dotted; opacity: .85; }
.calendar--movable .calendar__event { cursor: grab; }
.calendar__event--dragging { opacity: .5; }
.calendar__day--over { outline: 2px dashed var(--m-primary); outline-offset: -2px; background: var(--m-primary-soft); }
.calendar__event-title { display: none; overflow: hidden; text-overflow: ellipsis; }
.calendar__time { display: none; flex: 0 0 auto; color: var(--m-fg-muted); }
@media (min-width: 48rem) {
  .calendar__day { min-height: 6rem; padding: calc(var(--m-space) * 1); }
  .calendar__events { flex-direction: column; flex-wrap: nowrap; }
  .calendar__event { width: auto; height: auto; padding: 2px calc(var(--m-space) * 1.5); border-radius: var(--m-radius-sm); border-left: 3px solid var(--cal-accent, var(--m-primary)); background: color-mix(in oklab, var(--cal-accent, var(--m-primary)) 16%, var(--m-surface)); }
  .calendar__event-title { display: block; }
  .calendar__time { display: block; }
}

/* Expandable sections and datasets */
.cl-table__expand { transition: transform .15s; }
.cl-table__expand--open { transform: rotate(180deg); }
.cl-table__section { --cell-bg: var(--m-surface-2); }
.cl-table__section td { padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); }
.cl-table__sections, .cf__datasets { display: flex; flex-direction: column; gap: calc(var(--m-space) * 3); }
.cf__datasets { margin-top: calc(var(--m-space) * 4); }
.cf__datasets .section { padding: calc(var(--m-space) * 4); background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); }
.section__title { display: flex; align-items: center; gap: calc(var(--m-space) * 2); margin: 0 0 calc(var(--m-space) * 2); font-size: var(--m-font-size-sm); font-weight: 600; color: var(--m-fg-strong); }
.section__scroll { overflow-x: auto; }
.section__table { width: 100%; border-collapse: collapse; font-size: var(--m-font-size-sm); }
.section__table th { text-align: left; padding: calc(var(--m-space) * 1) calc(var(--m-space) * 2); font-size: var(--m-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--m-fg-muted); border-bottom: 1px solid var(--m-border); white-space: nowrap; }
.section__table td { padding: calc(var(--m-space) * 1.25) calc(var(--m-space) * 2); border-bottom: 1px solid var(--m-border); }
.section__more, .section__empty { margin: calc(var(--m-space) * 1) 0 0; font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }

/* Search tools (micosta.tools): buttons inside the search box */
.search-field__tools { display: flex; align-items: center; gap: calc(var(--m-space) * 1); padding-left: calc(var(--m-space) * 1); border-left: 1px solid var(--m-border); }
.search-field__tool { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.5); padding: calc(var(--m-space) * 1) calc(var(--m-space) * 2); border: 0; border-radius: var(--m-radius); background: transparent; color: var(--m-fg-muted); font: inherit; font-size: var(--m-font-size-sm); cursor: pointer; text-decoration: none; }
.search-field__tool:hover { background: var(--m-surface-3); color: var(--m-fg-strong); text-decoration: none; }
.search-field__tool + .search-field__tool { margin-left: calc(var(--m-space) * 1); padding-left: calc(var(--m-space) * 3); border-left: 1px solid var(--m-border); border-radius: 0 var(--m-radius) var(--m-radius) 0; }
@media (max-width: 47.99rem) { .search-field__tool-label { display: none; } .search-field--page:has(.search-field__tools) input { padding-right: 6rem; } }
.scanner__body { position: relative; }
.scanner__frame { position: absolute; inset: 15% 20%; border: 2px solid rgb(255 255 255 / .8); /* white on the camera image, whatever the theme */ border-radius: var(--m-radius); box-shadow: 0 0 0 999px rgb(0 0 0 / .35); pointer-events: none; }
.scanner__hint { flex: 1; font-size: var(--m-font-size-sm); color: var(--m-fg-muted); }

/* Saved filters: tab menu and dialog */
.tabs__saved { display: inline-flex; align-items: center; }
.tabs__scope { margin-left: .35rem; font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
.tabs__menu-toggle { border: 0; background: none; padding: .25rem .4rem; color: var(--m-fg-muted); cursor: pointer; font: inherit; }
.tabs__menu-toggle:hover { color: var(--m-fg-strong); }
.saved-filter .modal__box { max-width: 32rem; }
.saved-filter__body { display: flex; flex-direction: column; gap: calc(var(--m-space) * 3); }
.saved-filter__scopes { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1.5); }
.saved-filter__scope { display: flex; align-items: center; gap: calc(var(--m-space) * 2); font-size: var(--m-font-size-sm); cursor: pointer; }
.saved-filter__icon-row { display: flex; gap: calc(var(--m-space) * 2); align-items: center; margin-bottom: calc(var(--m-space) * 2); }
.saved-filter__icon-row input { flex: 1; }
.saved-filter__preview { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--m-radius); background: var(--m-primary-soft); color: var(--m-primary-ink); }
.saved-filter__icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr)); gap: 4px; max-height: 10rem; overflow-y: auto; padding: 4px; border: 1px solid var(--m-border); border-radius: var(--m-radius); }
.saved-filter__icon { display: grid; place-items: center; height: 2.25rem; border: 1px solid transparent; border-radius: var(--m-radius); background: none; color: var(--m-fg); cursor: pointer; }
.saved-filter__icon:hover { background: var(--m-surface-3); }
.saved-filter__icon--active { border-color: var(--m-primary); background: var(--m-primary-soft); color: var(--m-primary-ink); }

/* Map view */
.map-view { position: relative; }
.map-view__canvas { height: clamp(24rem, 70vh, 48rem); border-radius: var(--m-radius); border: 1px solid var(--m-border); overflow: hidden; background: var(--m-surface-2); }
.map-view__empty { position: absolute; inset: auto 0 0 0; margin: 0; padding: calc(var(--m-space) * 2); text-align: center; font-size: var(--m-font-size-sm); color: var(--m-fg-muted); }
.map-popup { min-width: 12rem; font-size: var(--m-font-size-sm); display: flex; flex-direction: column; gap: 4px; }
.map-popup__row { display: flex; justify-content: space-between; gap: calc(var(--m-space) * 2); }
.map-popup__row > span:first-child { color: var(--m-fg-muted); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--m-surface); color: var(--m-fg); }
html.theme-dark .leaflet-tile { filter: brightness(.7) contrast(1.1) saturate(.6); }

/* Timeline view: one continuous line, coloured dots, plain cards. The object history uses the
   same class names under .history (layout.css). */
.timeline { position: relative; display: flex; flex-direction: column; gap: calc(var(--m-space) * 5); padding: 0 0 calc(var(--m-bottombar-height) + var(--m-space) * 4) calc(var(--m-space) * 7); }
.timeline::before { content: ""; position: absolute; left: calc(var(--m-space) * 2); top: .5rem; bottom: 0; width: 2px; background: var(--m-border); }
.timeline__day { position: relative; }
.timeline__date { position: relative; margin: 0 0 calc(var(--m-space) * 2); font-size: var(--m-font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--m-fg-muted); }
.timeline__date::before { content: ""; position: absolute; left: calc(var(--m-space) * -7 + var(--m-space) * 2 - 4px); top: .35rem; width: 10px; height: 10px; border-radius: var(--m-radius-pill); background: var(--m-surface); border: 2px solid var(--m-border-strong); }
.timeline__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--m-space) * 3); }
.timeline__item { position: relative; --tl-accent: var(--m-primary); }
.timeline__item--success { --tl-accent: var(--m-success); } .timeline__item--warning { --tl-accent: var(--m-warning); } .timeline__item--danger { --tl-accent: var(--m-danger); } .timeline__item--info { --tl-accent: var(--m-info); } .timeline__item--secondary { --tl-accent: var(--m-fg-muted); }
.timeline__dot { position: absolute; left: calc(var(--m-space) * -7 + var(--m-space) * 2 - 5px); top: 1.1rem; width: 12px; height: 12px; border-radius: var(--m-radius-pill); background: var(--tl-accent); box-shadow: 0 0 0 3px var(--m-bg, var(--m-surface-2)); }
.timeline__card { padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); }
.timeline__head { display: flex; align-items: center; gap: calc(var(--m-space) * 2); }
.timeline__title { font-weight: 600; color: var(--m-fg-strong); flex: 1; min-width: 0; }
.timeline__time { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
.timeline__head .row-menu { position: static; }
.timeline__fields { margin: calc(var(--m-space) * 2) 0 0; display: grid; gap: calc(var(--m-space) * 2); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); font-size: var(--m-font-size-sm); }
.timeline__fields dt { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
.timeline__fields dd { margin: 0; }

/* Infinite pager */
.cl__infinite { display: flex; justify-content: center; padding: calc(var(--m-space) * 3); min-height: 2rem; color: var(--m-fg-muted); }
.cl__infinite-status { font-size: var(--m-font-size-sm); color: var(--m-fg-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 47.99rem) {
  .cl__tools-row > .segmented { width: 100%; margin-left: 0; }
  .cl__tools-row > .segmented .segmented__item { flex: 1; justify-content: center; }
}

/* Calendar agenda mode and the tapped day */
.calendar__grid-wrap { display: flex; flex-direction: column; gap: calc(var(--m-space) * 3); }
.calendar__day--selected { outline: 2px solid var(--m-primary); outline-offset: -2px; }
.calendar__agenda { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); }
.calendar__agenda-day { padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); }
.calendar__agenda-date { margin: 0 0 calc(var(--m-space) * 2); font-size: var(--m-font-size-sm); font-weight: 600; text-transform: capitalize; color: var(--m-fg-strong); }
.calendar__agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--m-space) * 1); }
.calendar__agenda-item { display: flex; align-items: center; gap: calc(var(--m-space) * 2); padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 2); border-left: 3px solid var(--cal-accent, var(--m-primary)); border-radius: var(--m-radius-sm); background: color-mix(in oklab, var(--cal-accent, var(--m-primary)) 10%, var(--m-surface)); color: var(--m-fg-strong); text-decoration: none; }
.calendar__agenda-item .calendar__time { display: inline; flex: 0 0 auto; }

/* Sections fetched on demand */
.lazy-sections:empty { display: none; }
.lazy-sections__spinner { display: inline-block; width: 1rem; height: 1rem; margin: calc(var(--m-space) * 2); border: 2px solid var(--m-border-strong); border-top-color: var(--m-primary); border-radius: 50%; animation: lazy-spin .8s linear infinite; }
@keyframes lazy-spin { to { transform: rotate(360deg); } }

/* Table(autosave=True) and {% editable %}: the state of a control saved by fetch */
.editable--saving { opacity: .6; }
.editable--saved { --cell-bg: color-mix(in oklab, var(--m-success), transparent 88%); }
.editable--error { --cell-bg: color-mix(in oklab, var(--m-danger), transparent 90%); }
.editable--saved, .editable--error { transition: background-color .4s; }
.editable__error { margin-top: calc(var(--m-space) * 1); }
.cl-card--custom .cl-card__body { display: flex; flex-direction: column; gap: calc(var(--m-space) * 2); }
.editable { display: inline-block; min-width: 0; }
.editable select, .editable input:not([type="checkbox"]) { min-height: 2rem; padding-block: 0; font-size: var(--m-font-size-sm); }
.cl-card__meta { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 3); font-size: var(--m-font-size-sm); color: var(--m-fg-muted); }
.cl-card__meta b { color: var(--m-fg); font-weight: 500; }

/* "My selection" (micosta.selection) */
.selection-toggle { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: var(--m-radius-sm); background: transparent; color: var(--m-fg-muted); cursor: pointer; }
.selection-toggle:hover { background: var(--m-surface-3); color: var(--m-fg-strong); }
.selection-toggle--active { color: var(--m-primary-ink); }
.cl-card .selection-toggle { position: absolute; top: calc(var(--m-space) * 2.5); right: calc(var(--m-space) * 13); }
.cl__selection-bar { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--m-space) * 3); padding: calc(var(--m-space) * 2) calc(var(--m-space) * 3); margin-bottom: calc(var(--m-space) * 3); border: 1px solid var(--m-border); border-radius: var(--m-radius); background: var(--m-primary-soft); font-size: var(--m-font-size-sm); }

/* Collections inside a card (micosta.card_inlines) */
.card-inline { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1.5); padding-top: calc(var(--m-space) * 2); border-top: 1px solid var(--m-border); }
.card-inline__header { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--m-space) * 2); }
.card-inline__title { margin: 0; font-size: var(--m-font-size-sm); font-weight: 600; color: var(--m-fg-strong); }
.card-inline__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.card-inline__row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--m-space) * 2); padding: calc(var(--m-space) * 1) calc(var(--m-space) * 1.5); border-radius: var(--m-radius-sm); font-size: var(--m-font-size-sm); }
.card-inline__row:hover { background: var(--m-surface-2); }
.card-inline__cells { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 2.5); min-width: 0; }
.card-inline__tools { display: inline-flex; gap: calc(var(--m-space) * .5); flex-shrink: 0; }
.card-inline__tools .icon-button { width: 1.75rem; height: 1.75rem; }
.icon-button--danger:hover { color: var(--m-danger-ink); }
.card-inline__empty, .card-inline__more { margin: 0; font-size: var(--m-font-size-xs); }
.card-inline__dialog .modal__box { width: min(36rem, 94vw); }

/* Editable rows (sheet pages) */
.editable-rows { display: flex; flex-direction: column; gap: calc(var(--m-space) * 2); }
.editable-rows__table td { white-space: normal; }
.editable-rows__cell input:not([type="checkbox"]), .editable-rows__cell select, .editable-rows__cell textarea { width: 100%; min-width: 6rem; max-width: none; min-height: 2.1rem; padding-block: 0; font-size: var(--m-font-size-sm); }
.editable-rows__row.editable--saving td { opacity: .6; }
.editable-rows__row.editable--saved td { --cell-bg: color-mix(in oklab, var(--m-success), transparent 88%); }
.editable-rows__row.editable--error td { --cell-bg: color-mix(in oklab, var(--m-danger), transparent 90%); }
.editable-rows__row--new td { --cell-bg: color-mix(in oklab, var(--m-primary), transparent 94%); }
.editable-rows__tools { width: 2.5rem; }
.editable-rows__empty { margin: 0; font-size: var(--m-font-size-sm); }

/* Card tokens: --card-padding, --card-gap, --card-control-height and --card-separator can be set
   per view (Cards(card_class="cl-card--llamadas") and a rule in the project's CSS). The dense
   variant packs many fields: no padding, low controls, hairline separators. */
.cl-card--custom .cl-card__body { gap: var(--card-gap); }
.cl-card--custom .editable select, .cl-card--custom .editable input:not([type="checkbox"]), .cl-card--custom .editable textarea { min-height: var(--card-control-height); }
.cl-card--dense { --card-padding: 0; --card-gap: 0; --card-control-height: 1.75rem; --card-separator: color-mix(in oklab, var(--m-border), transparent 40%); }
.cl-card--dense .cl-card__body > * { padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 2); border-bottom: 1px solid var(--card-separator); }
.cl-card--dense .cl-card__body > :last-child { border-bottom: 0; }
.cl-card--dense .cl-card__select { top: calc(var(--m-space) * 1.5); left: calc(var(--m-space) * 1.5); }
.cl-card--dense .editable input:not([type="checkbox"]), .cl-card--dense .editable select, .cl-card--dense .editable textarea { padding-inline: calc(var(--m-space) * 1.5); font-size: var(--m-font-size-xs); }
.cl-card--dense .card-inline { padding-top: calc(var(--m-space) * 1); border-top: 1px solid var(--card-separator); }
.cl-card--dense .card-inline__row { padding-block: calc(var(--m-space) * .5); }
.editable--inline { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1); }
.editable--inline > input, .editable--inline > select { width: auto; }
.map-popup__image { display: block; width: 100%; max-height: 8rem; object-fit: cover; border-radius: var(--m-radius-sm); margin: calc(var(--m-space) * 1.5) 0; }
.editable-rows__cell--readonly { color: var(--m-fg-muted); white-space: nowrap; }
.map-popup__head { display: flex; align-items: center; gap: calc(var(--m-space) * 1.5); }
.map-popup__select { flex: none; }
.kanban__tools .selection-toggle { width: 1.75rem; height: 1.75rem; }