/* ============================================================================
   34-tom-select.css - the ChronosMultiSelect combobox.

   ONE file, two parts, and the location is not a matter of taste. AssetVersion
   builds the cache token by scanning wwwroot/css/chronos for modification times,
   so a stylesheet kept anywhere else is never part of that token: it would go
   stale on deploy and users would keep the pre-deploy copy with no way to know.
   That is why the vendored half lives here next to the skin instead of beside the
   JS in wwwroot/lib.

   PART A - Tom Select 2.6.2 BASE stylesheet, verbatim. Apache-2.0, banner intact.
     Refetch with:
       curl -sS https://cdn.jsdelivr.net/npm/tom-select@2.6.2/dist/css/tom-select.css
     The BASE file, deliberately, never the DEFAULT theme: that one paints its own
     palette and would fight the Chronos design tokens on every surface. The base
     is structure only - flex, positioning, the scroll box.
     Two local changes, both trailing: the source-map pointer is dropped (the .map
     is not vendored), and nothing else is touched. Upstream's own
     "color-mix(#fff, #d0d0d0, 85%)" on .dropdown-header is invalid CSS and is left
     exactly as shipped; the declaration is ignored by every browser and this
     component renders no dropdown header.

   PART B - the Chronos skin. Additive; overrides PART A by source order.

   Load it AFTER the rest of the cascade and before 24-theme-dark.css, and pair it
   with the two script tags in App.razor - see js/chronos-multiselect.js.
   ============================================================================ */

/* ============================================================================
   PART A - VENDORED, DO NOT EDIT BY HAND. Tom Select 2.6.2 base stylesheet.
   ============================================================================ */
/**
 * tom-select.css (v2.6.2)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
  padding: calc(8px - 2px - 0px) 8px calc(8px - 2px - 3px - 0px);
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}
.focus .ts-control {
  box-shadow: none;
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0px solid #d0d0d0;
  overflow: auto;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0px solid #cacaca;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: rgb(124.5, 124.5, 124.5);
  background: hsl(0, 0%, 124.9019607843%);
  border: 0px solid hsl(0, 0%, 111.568627451%);
}
.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
      -ms-user-select: auto !important;
          user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0px 4px !important;
}
.ts-control.rtl {
  text-align: right;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0px 4px 0px -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}
.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}
.ts-dropdown .active.create {
  color: #495c68;
}
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ts-dropdown-content {
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}

.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}

.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}

.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}

/* stylelint-disable function-name-case */
.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: hsl(0, 0%, -6.1764705882%);
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: hsl(0, 0%, 111.568627451%);
}

.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: hsl(0, 0%, 111.568627451%);
}

:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: .75rem;
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control:not(.rtl) {
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-control.rtl {
  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/* ============================================================================
   PART B - CHRONOS SKIN

   Everything above is upstream. Everything below is ours, and it only ever adds
   or overrides: the two parts are kept apart so a version bump is a paste of
   PART A with no hand-merging.

   Class hooks. .chronos-ms lands on the wrapper and .chronos-ms-dropdown on the
   dropdown, both added by js/chronos-multiselect.js at init. The dropdown needs a
   hook of its own because it is NOT a descendant of the wrapper: it is moved to
   <body> so it can escape any ancestor with overflow or a transform, and open
   from inside a modal. A descendant selector could never reach it there.
   ============================================================================ */

.chronos-multiselect {
    /* Owner rule: nothing stretches edge to edge on a wide monitor. */
    max-width: 480px;
    width: 100%;
}

.chronos-ms.ts-wrapper {
    font-family: var(--chronos-font-sans);
    font-size: 14px;
    width: 100%;

    /* PART A pins the control's right padding with !important:
       padding-right: max(--ts-pr-min, clear-button + caret). A skin cannot out-rank
       an !important, but it CAN feed the formula. 34px reserves a gutter for the
       caret drawn below, so long labels truncate before running under it; without
       this the formula resolves to 12px and text overlaps the caret. */
    --ts-pr-min: 34px;
}

/* ---------------------------------------------------------------- the control */

/* At rest the control is .modal-search's box, verbatim: same 1px outline border, same
   8px radius, same 10px 12px padding, no shadow. The picker then sits in the modal's
   form column as a sibling of the search and date inputs, not as a foreigner. The only
   departures are the ones a picker needs: a 44px touch floor and the caret gutter. */
.chronos-ms .ts-control {
    background: var(--chronos-card-bg);
    border: 1px solid var(--chronos-outline);
    border-radius: 8px;
    box-shadow: none;
    color: var(--chronos-fg-primary);
    font-size: 14px;
    line-height: 20px;
    min-height: 44px;
    padding: 10px 34px 10px 12px;
    gap: 6px;
    align-items: center;

    /* The control grows with every chip. Owner rule: content growth may not move the
       page, so it stops at three rows of chips and scrolls inside itself instead.
       Three 28px chip rows + two 6px gaps + 8px vertical padding twice + 2px border. */
    max-height: 118px;
    overflow-y: auto;
    overflow-x: hidden;
    cursor: pointer;
    transition: border-color 120ms ease;
}

/* PART A re-pads the control the moment it holds items and its four-class selector
   out-ranks the rule above, which is how the box used to change shape when the first
   chip appeared. Out-rank it back and keep ONE declared geometry: 8px + a 28px chip
   row + 8px = the same 44px the empty control stands at. */
.chronos-ms.ts-wrapper.multi.has-items .ts-control {
    padding: 8px 34px 8px 12px;
}

.chronos-ms .ts-control:hover {
    border-color: var(--chronos-day-muted);
}

/* Same focus treatment as .modal-search: the border turns violet, nothing else moves.
   focus-visible would never fire here: the focus node is a div that Tom Select focuses
   programmatically on open, so the browser does not always score it as a keyboard
   focus. Paint it on plain focus and on the library's own state class. */
.chronos-ms.focus .ts-control,
.chronos-ms .ts-control:focus {
    outline: none;
    border-color: var(--chronos-violet);
}

/* The caret. Tom Select draws none of its own in the base stylesheet. */
.chronos-ms .ts-control::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--chronos-fg-muted);
    border-bottom: 2px solid var(--chronos-fg-muted);
    transform: rotate(45deg);
    transition: transform 140ms ease;
    pointer-events: none;
}

.chronos-ms.dropdown-active .ts-control::after {
    transform: rotate(-135deg);
    margin-top: -2px;
}

/* The placeholder. Tom Select puts its own on control_input, which controlInput:null
   leaves detached from the document, so the built-in placeholder can never paint.
   The script writes the text onto the control as data-placeholder instead. */
.chronos-ms:not(.has-items) .ts-control::before {
    content: attr(data-placeholder);
    color: var(--chronos-fg-muted);
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- chips */

/* The app's pill chip, as declared by .chip in 02-main-layout.css: chip surface token,
   pill radius, NO border, hover wash. Restated here because PART A paints its own grey
   squares at the same specificity, and because these chips lead with an avatar, so the
   left padding is tighter than the text-only pill's. 4px + 20px line + 4px = the 28px
   row the control's max-height arithmetic above counts on. */
.chronos-ms.multi .ts-control > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 12px 4px 6px;
    background: var(--chronos-chip-bg);
    color: var(--chronos-fg-primary);
    border: none;
    border-radius: var(--radius-pill);
    font-size: 13px;
    line-height: 20px;
    max-width: 100%;
    overflow: hidden;
}

.chronos-ms.multi .ts-control > div:hover {
    background: var(--chronos-hover-bg);
}

/* The library marks a chip .active when it is clicked - armed for removal. */
.chronos-ms.multi .ts-control > div.active {
    background: var(--chronos-violet-light);
    color: var(--chronos-fg-primary);
}

.chronos-ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.chronos-ms-chip .chronos-ms-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The chip's remove control, dressed ahead of time. The wrapper script does not enable
   the remove_button plugin yet - chips are removed by unticking their row - but the
   moment it does, the affordance must not appear as PART A's bordered text glyph glued
   to the label. A round 18px icon target with the app's hover wash and no divider
   line. The :not(.rtl) leg is what ties PART A's five-class selector so this wins on
   source order. */
.chronos-ms.plugin-remove_button:not(.rtl) .item .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 2px;
    padding: 0;
    border-left: 0;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    color: var(--chronos-fg-muted);
}

.chronos-ms.plugin-remove_button:not(.rtl) .item .remove:hover {
    background: var(--chronos-hover-bg);
    color: var(--chronos-fg-primary);
}

/* ---------------------------------------------------------------- the dropdown */

.chronos-ms-dropdown {
    /* The whole point of this component. The documented stack is: modal backdrop 200,
       profile 1000, inventory and customization 1100, confirm dialog 1200, status
       toast 1300, onboarding spotlight 2000+. 1290 clears every surface a combobox
       can sit inside, and stays under the toast and the tour, which must remain on
       top of everything. The two <details> menus this component replaces sit at 50
       and 60, which is why neither of them can ever be opened from inside a modal. */
    z-index: 1290;

    border: 1px solid var(--chronos-outline);
    border-radius: var(--radius-card);
    background: var(--chronos-card-bg);

    /* A floating sheet ABOVE the modal, not a smear across it. The modal card itself
       floats on a wide soft shadow, so the sheet - one layer higher - carries a
       tighter, darker two-part shadow: a deep drop for altitude plus a snug rim that
       keeps the edge crisp where it crosses the action buttons it inevitably
       overlaps. */
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.10);
    margin-top: 6px;
    padding: 4px;
    overflow: hidden;
}

.chronos-ms-dropdown .ts-dropdown-content {
    /* Owner rule: the list must never grow the page as it filters. Fixed cap,
       scrolled internally. The cap is derived, not guessed, from the filter modal at
       its MINIMUM height using the declared values in 04-compose-filter-modal.css:

         card children: head 30 + search 42 + dates 88 + status 108 + progress 44
         + friends 68 + actions 42, six 14px gaps, 24px padding twice = a 554px card.
         Centered, its top edge is at 50vh - 277px; the control's bottom edge sits
         474px into the card and the sheet opens 6px lower, so the sheet's top edge
         is at 50vh + 203px. Sheet chrome is 10px of padding and border, and 12px of
         backdrop is kept below the sheet so its shadowed edge is always on screen:
         cap = 100vh - 50vh - 203px - 10px - 12px = 50vh - 225px.

       The band between the control and the card's bottom edge is only 80px deep
       (14px gap + 42px actions + 24px padding), so NO downward sheet of usable
       height can leave the buttons uncovered while it is open - that is the
       mechanism, and clicking outside closes it. What the cap guarantees instead:
       the sheet's own bottom edge always lands inside the viewport with backdrop
       visible beneath it, so the buttons read as layered UNDER a floating card
       instead of torn by a rendering glitch clipped at the screen edge.

       The 96px floor is two 44px rows plus slack: on viewports shorter than 642px
       the floor wins and two tappable rows beat an on-screen sliver. */
    max-height: clamp(96px, 50vh - 225px, 264px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: auto;
    overscroll-behavior: contain;
}

.chronos-ms-dropdown .option {
    display: flex;
    align-items: center;
    padding: 0;
    border-radius: 8px;
    color: var(--chronos-fg-primary);
}

/* Keyboard and pointer wash - the same surface the app's .chip takes on hover. */
.chronos-ms-dropdown .option.active {
    background: var(--chronos-hover-bg);
    color: var(--chronos-fg-primary);
}

.chronos-ms-dropdown .option.selected {
    background: var(--chronos-violet-light);
}

.chronos-ms-dropdown .no-results {
    padding: 12px 10px;
    color: var(--chronos-fg-muted);
    font-size: 13px;
}

.chronos-ms-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    /* 44px touch floor everywhere - the 375px viewport is verification priority one.
       Long usernames truncate through .chronos-ms-label instead of wrapping the row
       taller than its floor. */
    min-height: 44px;
    padding: 5px 10px;
}

.chronos-ms-row .chronos-ms-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chronos-ms-hint {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--chronos-fg-muted);
}

/* ---------------------------------------------------------------- the checkbox */

/* checkbox_options renders a real <input type="checkbox">. The script takes it out of
   the tab order and out of the accessibility tree (it calls preventDefault on its own
   click, so it is decoration - the row is the control), which leaves it as a purely
   visual affordance sized and aligned here. Its violet accent-color arrives from the
   app-wide rule in 00-tokens-base.css and is deliberately not restated. */
.chronos-ms-dropdown .option input.tomselect-checkbox {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0 0 0 10px;
    pointer-events: none;
}

.chronos-ms-dropdown .option input.tomselect-checkbox + .chronos-ms-row {
    padding-left: 8px;
}

/* ---------------------------------------------------------------- avatars and dots */

.chronos-ms-avatar,
.chronos-ms-dot {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    /* White initials on the lavender disc in BOTH themes - no token flips with the
       theme here, so the value rides as a var fallback. */
    color: var(--chronos-ms-avatar-fg, #fff);
    background: var(--chronos-lavender);
    overflow: hidden;
}

/* ---------------------------------------------------------------- states */

.chronos-ms.disabled .ts-control,
.chronos-ms.locked .ts-control {
    opacity: 0.55;
    background: var(--chronos-chip-bg);
    cursor: not-allowed;
}

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

/* Verification priority number one is 375px. The 44px row floor above already covers
   touch; what changes here is geometry only. Nothing in this file assumes a pointer:
   with controlInput:null there is no text field, so tapping the control never pops
   the on-screen keyboard. */
@media (max-width: 480px) {
    .chronos-multiselect {
        max-width: none;
    }

    .chronos-ms .ts-control {
        min-height: 46px;
        max-height: 124px;
    }

    .chronos-ms-dropdown .ts-dropdown-content {
        /* Same derivation as the desktop cap with the phone paddings (18px card
           padding, the date columns stacked): the sheet's top edge lands at
           50vh + 241px, so cap = 50vh - 263px, same two-row floor. On a 667px-tall
           phone the floor wins (the formula gives 70px) and the sheet may touch the
           bottom edge - accepted: two tappable rows beat a sliver. */
        max-height: clamp(96px, 50vh - 263px, 240px);
    }
}

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    .chronos-ms .ts-control,
    .chronos-ms .ts-control::after {
        transition: none;
    }
}

/* ---------------------------------------------------------------- dark theme */

/* This file loads BEFORE 24-theme-dark.css, and these selectors are new, so nothing
   there fights them. The tokens above re-resolve on their own once the dark token
   block applies; this block restates the FULL open state - sheet, rows, chips,
   washes - so white-on-white can never come back through PART A's hardcoded whites,
   and carries the one thing a token cannot express: shadows that must go darker
   rather than lighter. */
html[data-theme="dark"] .chronos-ms .ts-control,
html[data-theme="dark"] .chronos-ms.single.input-active .ts-control {
    background: var(--chronos-card-bg);
    color: var(--chronos-fg-primary);
}

html[data-theme="dark"] .chronos-ms.multi .ts-control > div {
    background: var(--chronos-chip-bg);
    color: var(--chronos-fg-primary);
}

html[data-theme="dark"] .chronos-ms.multi .ts-control > div:hover {
    background: var(--chronos-hover-bg);
}

html[data-theme="dark"] .chronos-ms.multi .ts-control > div.active {
    background: var(--chronos-violet-light);
}

html[data-theme="dark"] .chronos-ms-dropdown {
    background: var(--chronos-card-bg);
    border-color: var(--chronos-outline);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .chronos-ms-dropdown .option {
    color: var(--chronos-fg-primary);
}

html[data-theme="dark"] .chronos-ms-dropdown .option.active {
    background: var(--chronos-hover-bg);
}

html[data-theme="dark"] .chronos-ms-dropdown .option.selected {
    background: var(--chronos-violet-light);
}

html[data-theme="dark"] .chronos-ms-dropdown .optgroup-header {
    background: var(--chronos-card-bg);
    color: var(--chronos-fg-secondary);
}

html[data-theme="dark"] .chronos-ms-dropdown .no-results {
    color: var(--chronos-fg-muted);
}