#calendar_grid { display: contents; }

.calendar-app {
  --cal-container: var(--color-bg);
  --cal-surface: oklch(var(--lch-gray));
  --cal-container-inset: oklch(var(--lch-gray));
  --cal-container-hover: oklch(var(--lch-gray-dark));
  --cal-divider: var(--color-border-dark);
  --cal-divider-strong: var(--color-border-darker);
  --cal-primary: var(--color-text);
  --cal-secondary: var(--color-text-lighter);
  --cal-subdued: oklch(var(--lch-gray-darkest));
  --cal-inverse: var(--color-text);
  --cal-inverse-hover: var(--color-text-lighter);
  --cal-on-inverse: var(--color-text-reversed);

  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.cal-color-green  { --chip: var(--palette-green); }
.cal-color-blue   { --chip: var(--palette-blue); }
.cal-color-indigo { --chip: var(--palette-indigo); }
.cal-color-violet { --chip: var(--palette-violet); }
.cal-color-pink   { --chip: var(--palette-pink); }
.cal-color-rose   { --chip: var(--palette-rose); }
.cal-color-orange { --chip: var(--palette-orange); }
.cal-color-teal   { --chip: var(--palette-teal); }
.cal-color-cyan   { --chip: var(--palette-cyan); }
.cal-color-amber  { --chip: var(--palette-amber); }
.cal-color-red    { --chip: var(--palette-red); }
.cal-color-slate  { --chip: var(--palette-slate); }

[class*="cal-color-"] {
  --chip-soft: color-mix(in oklab, var(--chip) 16%, transparent);
  --chip-text: color-mix(in oklab, var(--chip), var(--color-text) 35%);
}

.calendar { display: flex; flex-direction: column; gap: 0.75rem; min-height: calc(100vh - 5rem); padding: 0.5rem 1rem 1rem; }

.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.25rem 0 0.75rem; border-bottom: 1px solid var(--cal-divider); }
.calendar-toolbar__nav { display: flex; align-items: center; gap: 0.375rem; flex: 0 0 auto; }
.calendar-toolbar__label { flex: 1 1 0; min-width: 0; font-size: 1.125rem; font-weight: 600; color: var(--cal-primary); margin: 0; text-transform: capitalize; letter-spacing: -0.01em; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-toolbar__sources { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; justify-content: center; flex-basis: 100%; }
.calendar-toolbar__actions { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; flex-basis: 100%; }
.calendar-toolbar__views { display: inline-flex; background: var(--cal-container-inset); border-radius: 0.5rem; padding: 0.1875rem; gap: 0.125rem; }
.seg-item { padding: 0.3125rem 0.625rem; border-radius: 0.375rem; font-size: 0.75rem; color: var(--cal-secondary); text-decoration: none; }
.seg-item--on { background: var(--cal-container); color: var(--cal-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.08); font-weight: 500; }

.grid-month { background: var(--cal-container); border: 1px solid var(--cal-divider); border-radius: 0.5rem; overflow: hidden; flex: 1; display: flex; flex-direction: column; }
.grid-month__header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--cal-surface); border-bottom: 1px solid var(--cal-divider); }
.grid-month__dow { padding: 0.5rem 0.25rem; font-size: 0.625rem; font-weight: 600; color: var(--cal-subdued); text-transform: uppercase; letter-spacing: 0.3px; text-align: center; }
.grid-month__body { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(64px, 1fr); flex: 1; }
.day-cell { border-right: 1px solid var(--cal-divider); border-bottom: 1px solid var(--cal-divider); padding: 0.25rem; font-size: 0.75rem; position: relative; background: var(--cal-container); min-height: 64px; cursor: pointer; display: flex; flex-direction: column; gap: 0.1875rem; }
.day-cell:hover { background: var(--cal-container-hover); }
.day-cell--other-month { background: var(--cal-surface); }
.day-cell--other-month .day-cell__num { color: var(--cal-subdued); }
.day-cell__head { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; min-height: 1.75rem; }
.day-cell__num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; min-height: 1.75rem; padding: 0 0.25rem; color: var(--cal-primary); font-weight: 500; font-size: 0.8125rem; text-decoration: none; line-height: 1; border-radius: 9999px; transition: background-color 0.12s ease; }
.day-cell--today .day-cell__num { background: var(--cal-inverse); color: var(--cal-on-inverse); font-weight: 600; }
.day-cell__num:hover { background: var(--cal-container-inset); color: var(--cal-primary); }
.day-cell--today .day-cell__num:hover { background: var(--cal-inverse-hover); opacity: 1; }
.day-cell__items { display: flex; flex-direction: column; gap: 0.1875rem; padding-left: 0.0625rem; min-width: 0; }
.day-cell__row { display: flex; gap: 0.125rem; min-width: 0; }
.day-cell__row > * { flex: 1 1 0; min-width: 0; }
.day-cell__more { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.625rem; color: var(--cal-secondary); padding-left: 0.125rem; text-decoration: none; }
.day-cell__more:hover { color: var(--cal-primary); }
.day-cell__more-dots { display: inline-flex; align-items: center; gap: 0.125rem; }
.day-cell__more-dot { width: 0.3125rem; height: 0.3125rem; border-radius: 9999px; display: inline-block; background: var(--chip); }

.chip { display: inline-block; width: 0.375rem; height: 0.375rem; padding: 0; border-radius: 9999px; overflow: hidden; line-height: 0; text-decoration: none; flex-shrink: 0; background: var(--chip); }
.chip__title, .chip__icon { display: none; }

.grid-week { background: var(--cal-container); border: 1px solid var(--cal-divider); border-radius: 0.5rem; flex: 1; display: flex; flex-direction: column; overflow-x: auto; overflow-y: hidden; }
.grid-week__header { display: grid; grid-template-columns: 48px repeat(7, minmax(56px, 1fr)); background: var(--cal-surface); border-bottom: 1px solid var(--cal-divider); min-width: 640px; }
.grid-week__corner { padding: 0.5rem; }
.grid-week__dow { padding: 0.5rem 0.25rem; font-size: 0.625rem; text-align: center; color: var(--cal-secondary); border-right: 1px solid var(--cal-divider); }
.grid-week__dow--today { background: var(--chip-soft, var(--color-selected)); font-weight: 600; }
.grid-week__dow-name { display: block; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--cal-subdued); margin-bottom: 0.0625rem; }
.grid-week__dow-num { display: block; font-size: 1rem; font-weight: 500; color: var(--cal-primary); }
.grid-week__all-day-row { display: grid; grid-template-columns: 48px repeat(7, minmax(56px, 1fr)); border-bottom: 1px solid var(--cal-divider); min-height: 28px; min-width: 640px; }
.grid-week__hour-label { font-size: 0.625rem; color: var(--cal-subdued); text-align: right; padding: 0 0.5rem; border-right: 1px solid var(--cal-divider); display: flex; align-items: center; justify-content: flex-end; }
.grid-week__cell { padding: 0.1875rem; border-right: 1px solid var(--cal-divider); }
.grid-week__body { flex: 1; overflow-y: auto; min-width: 640px; }
.grid-week__row { display: grid; grid-template-columns: 48px repeat(7, minmax(56px, 1fr)); min-height: 40px; border-bottom: 1px solid var(--cal-divider); }

.grid-day { background: var(--cal-container); border: 1px solid var(--cal-divider); border-radius: 0.5rem; overflow: hidden; flex: 1; display: flex; flex-direction: column; --hour-height: 60px; --label-width: 56px; }
.grid-day__section { border-bottom: 1px solid var(--cal-divider); }
.grid-day__section-header { padding: 0.375rem 0.75rem; font-size: 0.625rem; font-weight: 600; color: var(--cal-secondary); text-transform: uppercase; letter-spacing: 0.5px; background: var(--cal-container-inset); }
.grid-day__section-body { padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.grid-day__hour-label { font-family: inherit; font-size: 0.75rem; color: var(--cal-subdued); padding: 0.4375rem 0.625rem; border: 0; border-right: 1px solid var(--cal-divider); background: transparent; display: flex; align-items: center; justify-content: flex-end; gap: 0.3125rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.grid-day__hour-label:focus-visible { outline: 0; }
.grid-day__hour-text { letter-spacing: -0.01em; }
.grid-day__hour-plus { font-weight: 600; font-size: 0.9375rem; line-height: 0.75rem; color: var(--cal-subdued); opacity: 0.35; transition: opacity 0.15s ease, color 0.15s ease; }
.grid-day__row:hover .grid-day__hour-label,
.grid-day__row:focus-within .grid-day__hour-label { background: var(--cal-container-hover); color: var(--cal-primary); }
.grid-day__row:hover .grid-day__hour-plus,
.grid-day__row:focus-within .grid-day__hour-plus { opacity: 1; color: var(--cal-primary); }
@media (hover: hover) { .grid-day__hour-plus { opacity: 0; } }
.grid-day__body { flex: 1; overflow-y: auto; }
.grid-day__timeline { position: relative; }
.grid-day__row { display: grid; grid-template-columns: var(--label-width) 1fr; min-height: var(--hour-height); border-bottom: 1px solid var(--cal-divider); }
.grid-day__item-block { --col-index: 0; --col-total: 1; position: absolute; left: calc(var(--label-width) + var(--col-index) * (100% - var(--label-width)) / var(--col-total)); width: calc((100% - var(--label-width)) / var(--col-total)); top: calc(var(--start-minutes) * var(--hour-height) / 60); height: calc(var(--duration-minutes) * var(--hour-height) / 60); z-index: 5; padding: 1px 2px; pointer-events: none; }
.grid-day .grid-day__item-block .chip { margin: 0; height: 100%; display: flex; align-items: flex-start; padding: 0.3125rem 0.5rem; white-space: normal; pointer-events: auto; }

.hour-slot { position: relative; border-right: 1px solid var(--cal-divider); padding: 0.1875rem; cursor: pointer; }
.hour-slot:not(.hour-slot--has-items)::after { content: "+"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--cal-subdued); font-size: 1rem; line-height: 1; opacity: 0; transition: opacity 0.12s ease; pointer-events: none; }
.hour-slot:not(.hour-slot--has-items):hover { background: var(--cal-container-inset); }
.hour-slot:not(.hour-slot--has-items):hover::after { opacity: 1; }
.grid-day .hour-slot { cursor: pointer; padding: 0; }
.grid-day .hour-slot::after { content: none; }
.hour-slot--has-items { cursor: default; }

.grid-week .chip, .grid-day .chip { display: flex; align-items: center; gap: 0.25rem; width: auto; height: auto; padding: 0.125rem 0.375rem; border-radius: 0.25rem; line-height: 1.2; font-size: 0.6875rem; overflow: hidden; white-space: nowrap; background: var(--chip-soft); color: var(--chip-text); }
.grid-week .chip + .chip, .grid-day .chip + .chip { margin-top: 0.125rem; }
.grid-week .chip__title, .grid-day .chip__title { display: inline; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.grid-week .chip__icon, .grid-day .chip__icon { display: inline-flex; align-items: center; flex-shrink: 0; }

.source-chip { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; text-decoration: none; line-height: 1; cursor: pointer; border: 0; background: var(--chip-soft); color: var(--chip-text); transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.source-chip__label { white-space: nowrap; }
.source-chip__icon { flex-shrink: 0; color: var(--chip); }
.source-chip__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--chip); flex-shrink: 0; }
.source-chip:not(.source-chip--off):hover { filter: brightness(0.96); }
.source-chip--off { background: var(--cal-container-inset); color: var(--cal-subdued); }
.source-chip--off .source-chip__icon, .source-chip--off .source-chip__dot { color: var(--cal-subdued); background: var(--cal-subdued); }
.source-chip--off:hover { background: var(--cal-container-hover); color: var(--cal-secondary); }
.source-chip--add { background: var(--cal-container-inset); color: var(--cal-secondary); }
.source-chip--add .source-chip__icon { color: var(--cal-secondary); }
.source-chip--add:hover { background: var(--cal-container-hover); color: var(--cal-primary); }

.source-chip-group { display: inline-flex; align-items: center; gap: 0; }
.source-chip__edit { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.375rem; margin-left: 0.0625rem; border-radius: 9999px; color: var(--cal-subdued); text-decoration: none; flex-shrink: 0; transition: background-color 0.15s ease, color 0.15s ease; }
.source-chip__edit:hover { background: var(--cal-container-hover); color: var(--cal-primary); }

.event-dialog { margin: auto; width: 460px; max-width: calc(100vw - 1.5rem); padding: 1.25rem; border: 1px solid var(--cal-divider); border-radius: 0.75rem; background: var(--cal-container); color: var(--cal-primary); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18); }
.event-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.event-dialog__head { font-size: 0.6875rem; color: var(--cal-subdued); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 1rem; }
.event-dialog__form { display: flex; flex-direction: column; gap: 0.875rem; }
.event-dialog__field { display: flex; flex-direction: column; gap: 0.375rem; }
.event-dialog__field label { font-size: 0.75rem; font-weight: 500; color: var(--cal-secondary); }
.event-dialog__field input, .event-dialog__select { padding: 0.5625rem 0.75rem; border: 1px solid var(--cal-divider); border-radius: 0.5rem; font-size: 0.9375rem; background: var(--cal-container); color: var(--cal-primary); font-family: inherit; }
.event-dialog__field input:focus, .event-dialog__select:focus { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; border-color: transparent; }
.event-dialog__all-day { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--cal-secondary); cursor: pointer; }
.event-dialog__actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--cal-divider); }
.event-dialog__actions form { margin: 0; }
.event-dialog__actions .btn--danger { margin-right: auto; }
.event-dialog__errors { background: color-mix(in oklab, var(--color-negative) 12%, transparent); border: 1px solid color-mix(in oklab, var(--color-negative) 30%, transparent); border-radius: 0.5rem; padding: 0.625rem 0.75rem; font-size: 0.8125rem; color: var(--color-negative); }
.event-dialog__errors p { margin: 0; }

.event-dialog__task { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin-top: 1rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; background: var(--cal-container-inset); }
.event-dialog__task-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.event-dialog__task-hint { flex: 1 1 12rem; margin: 0; font-size: 0.75rem; line-height: 1.35; color: var(--cal-secondary); }
.event-dialog__task-done { display: block; font-weight: 600; color: var(--cal-primary); overflow-wrap: anywhere; }
.event-dialog__task-error { flex: 1 1 100%; margin: 0; font-size: 0.75rem; line-height: 1.35; color: var(--color-negative); overflow-wrap: anywhere; }

.event-detail { display: flex; flex-direction: column; gap: 0.5rem; }
.event-detail__title { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--cal-primary); overflow-wrap: anywhere; }
.event-detail__line { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.875rem; color: var(--cal-secondary); }
.event-detail__line svg { flex-shrink: 0; }
.event-detail__dot { width: 0.625rem; height: 0.625rem; margin-inline: 0.125rem; border-radius: 9999px; background: var(--chip); flex-shrink: 0; }
.event-detail__description { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.5; color: var(--cal-primary); overflow-wrap: anywhere; }
.event-detail__description p { margin: 0 0 0.5rem; }

.color-picker { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.color-picker__swatch { display: inline-flex; cursor: pointer; }
.color-picker__input { position: absolute; opacity: 0; width: 0; height: 0; }
.color-picker__dot { width: 1.375rem; height: 1.375rem; border-radius: 9999px; background: var(--chip); box-shadow: 0 0 0 2px var(--cal-container), 0 0 0 2px var(--cal-divider); transition: box-shadow 0.12s ease; }
.color-picker__input:checked + .color-picker__dot { box-shadow: 0 0 0 2px var(--cal-container), 0 0 0 4px var(--chip); }

.offset-fieldset { border: 0; padding: 0.6875rem 0.75rem; margin: 0; background: var(--cal-container-inset); border-radius: 0.5rem; }
.offset-fieldset__legend { display: flex; align-items: center; gap: 0.375rem; padding: 0 0.125rem; font-size: 0.75rem; font-weight: 600; color: var(--cal-secondary); margin-bottom: 0.5rem; }
.offset-fieldset__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.25rem 0.5rem; }
.offset-fieldset__option { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.25rem 0.125rem; font-size: 0.8125rem; color: var(--cal-primary); cursor: pointer; line-height: 1; }
.offset-fieldset__option input[type="checkbox"],
.event-dialog__all-day input[type="checkbox"],
.event-dialog__scope input[type="radio"] {
  appearance: auto;
  accent-color: var(--accent);
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.event-dialog__scope { border: 0; padding: 0; margin: 0; text-align: left; }
.event-dialog__scope legend { display: block; margin-inline: 0; text-align: left; padding: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cal-secondary); }
.event-dialog__scope-options { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin-top: 0.5rem; }
.event-dialog__scope label { display: flex; align-items: center; gap: 0.4375rem; font-size: 0.875rem; color: var(--cal-secondary); cursor: pointer; }

.calendar .btn, .event-dialog .btn, .connection .btn { padding: 0.375rem 0.875rem; border-radius: 0.5rem; font-size: 0.8125rem; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; white-space: nowrap; border: 0; }
.calendar .btn--icon { width: 1.875rem; height: 1.875rem; padding: 0; justify-content: center; background: var(--cal-container-inset); color: var(--cal-secondary); font-size: 1rem; flex-shrink: 0; }
.calendar .btn--icon:hover { background: var(--cal-container-hover); color: var(--cal-primary); }
.calendar .btn--ghost, .event-dialog .btn--ghost, .connection .btn--ghost { background: var(--cal-container-inset); color: var(--cal-secondary); }
.calendar .btn--ghost:hover, .event-dialog .btn--ghost:hover, .connection .btn--ghost:hover { background: var(--cal-container-hover); color: var(--cal-primary); }
.calendar .btn--primary, .event-dialog .btn--primary, .connection .btn--primary { background: var(--cal-inverse); color: var(--cal-on-inverse); }
.event-dialog .btn--danger { background: transparent; color: var(--color-negative); }
.event-dialog .btn--danger:hover { background: color-mix(in oklab, var(--color-negative) 8%, transparent); }

@media (min-width: 64rem) {
  .calendar { gap: 0.5rem; min-height: 0; height: 100%; }
  .calendar-toolbar { flex-wrap: nowrap; gap: 0.875rem; padding: 0 0 0.5rem; flex-shrink: 0; }
  .calendar-toolbar__label { font-size: 1.375rem; text-align: left; margin: 0 0.5rem; flex: 0 0 auto; }
  .calendar-toolbar__sources { flex-basis: auto; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-start; }
  .calendar-toolbar__actions { flex-basis: auto; flex-shrink: 0; justify-content: flex-end; gap: 0.625rem; }
  .seg-item { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }

  .grid-month { min-height: 0; }
  .grid-month__dow { padding: 0.375rem 0.625rem; text-align: left; }
  .grid-month__body { grid-auto-rows: minmax(100px, 1fr); min-height: 0; }
  .day-cell { min-height: 100px; padding: 0.4375rem 0.5625rem; overflow: hidden; }
  .day-cell__items { gap: 0.125rem; padding-left: 0; }

  .chip { display: flex; align-items: center; gap: 0.25rem; width: auto; height: auto; padding: 0.1875rem 0.5rem; border-radius: 0.25rem; line-height: 1.3; font-size: 0.75rem; overflow: hidden; white-space: nowrap; background: var(--chip-soft); color: var(--chip-text); }
  .chip__title { display: inline; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .chip__icon { display: inline-flex; align-items: center; flex-shrink: 0; }

  .grid-week { overflow-x: hidden; }
  .grid-week__header, .grid-week__all-day-row, .grid-week__row { grid-template-columns: 64px repeat(7, minmax(0, 1fr)); min-width: 0; }
  .grid-week__body { min-width: 0; }
  .grid-week__row { min-height: 44px; }

  .grid-day { --hour-height: 64px; --label-width: 72px; }
}

.connection { max-width: 46rem; width: 100%; margin: 0 auto; padding: 2rem 1.25rem 3rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.connection > * { width: 100%; }
.connection > .btn { width: auto; }
.connection__head h1 { margin: 0 0 0.375rem; font-size: 1.375rem; }
.connection__lede { margin: 0; color: var(--cal-secondary); font-size: 0.9375rem; line-height: 1.5; }
.connection__alert { margin: 0; padding: 0.625rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; background: color-mix(in oklab, var(--color-negative) 12%, transparent); border: 1px solid color-mix(in oklab, var(--color-negative) 30%, transparent); color: var(--color-negative); }
.connection__account { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1rem; border: 1px solid var(--cal-divider); border-radius: 0.625rem; }
.connection__account strong { display: block; font-size: 0.9375rem; }
.connection__status { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cal-secondary); }
.connection__mirrors { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.connection__mirrors th { text-align: left; padding: 0.5rem 0.625rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cal-secondary); border-bottom: 1px solid var(--cal-divider); }
.connection__mirrors td { padding: 0.625rem; border-bottom: 1px solid var(--cal-divider); vertical-align: middle; }
.connection__mirrors select { width: 100%; }
.connection__row-actions { text-align: right; white-space: nowrap; }
.connection__row-actions form { margin: 0; display: inline-block; }
.connection__form { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.connection__form select { flex: 1; min-width: 0; }
.connection__tag { margin-left: 0.375rem; padding: 0.0625rem 0.375rem; border-radius: 9999px; font-size: 0.6875rem; background: var(--cal-divider); color: var(--cal-secondary); }
.connection__foot { display: flex; justify-content: flex-start; }
.cal-dot { display: inline-block; width: 0.625rem; height: 0.625rem; margin-right: 0.4375rem; border-radius: 9999px; background: var(--chip); vertical-align: middle; }