.list-item {
  position: relative;
  display: grid;
  grid-template-columns:
    var(--item-handle-track-size)
    var(--item-marker-track-size)
    minmax(0, 1fr);
  align-items: start;
  min-height: var(--ui-icon-button-size);
  margin-inline-start: calc(var(--item-level) * var(--item-indent-step));
  margin-block-end: var(--item-spacing, 0);
  background: var(--item-highlight-color, transparent);
  --item-line-height: var(--content-line-height, var(--line-height));
  --item-font-size: var(--regular-font-size, var(--font-size));
  --item-spacing: 0;
}

.list-item[data-level="0"] {
  --item-line-height: var(--level0-line-height, var(--content-line-height, var(--line-height)));
  --item-font-size: var(--level0-font-size, var(--list-level-0-size));
  --item-spacing: var(--level0-item-spacing, 6px);
}
.list-item[data-level="1"] {
  --item-line-height: var(--level1-line-height, var(--content-line-height, var(--line-height)));
  --item-font-size: var(--level1-font-size, var(--list-level-1-size));
  --item-spacing: var(--level1-item-spacing, 4px);
}
.list-item[data-level="2"] {
  --item-line-height: var(--level2-line-height, var(--content-line-height, var(--line-height)));
  --item-font-size: var(--level2-font-size, var(--list-level-2-size));
  --item-spacing: var(--level2-item-spacing, 3px);
}
.content-block[data-content-mode="text"] .list-item > .item-editor {
  color: var(--item-text-color, var(--text-color));
  font-family: var(--regular-font-family, var(--font-family));
  font-size: var(--regular-font-size, var(--font-size));
  font-weight: var(--regular-font-weight, 400);
}
.content-block[data-content-mode="text"] .list-item[data-text-style="heading1"] {
  --item-font-size: var(--heading1-font-size);
  --item-line-height: var(--heading1-line-height);
}
.content-block[data-content-mode="text"] .list-item[data-text-style="heading2"] {
  --item-font-size: var(--heading2-font-size);
  --item-line-height: var(--heading2-line-height);
}
.content-block[data-content-mode="text"] .list-item[data-text-style="heading3"] {
  --item-font-size: var(--heading3-font-size);
  --item-line-height: var(--heading3-line-height);
}
.content-block[data-content-mode="text"] .list-item[data-text-style="heading1"] > .item-editor { font-family: var(--heading1-font-family); font-size: var(--heading1-font-size); font-weight: 650; }
.content-block[data-content-mode="text"] .list-item[data-text-style="heading2"] > .item-editor { font-family: var(--heading2-font-family); font-size: var(--heading2-font-size); font-weight: 620; }
.content-block[data-content-mode="text"] .list-item[data-text-style="heading3"] > .item-editor { font-family: var(--heading3-font-family); font-size: var(--heading3-font-size); font-weight: 600; }

.list-item.is-selected {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.item-selection-region {
  position: absolute;
  z-index: 0;
  border-radius: var(--ui-radius-item-selection);
  background: color-mix(in srgb, var(--ui-accent) 9%, transparent);
  pointer-events: none;
}

.item-selection-region.is-placed {
  background: var(--ui-control-bg);
}

.is-dragging-item .item-selection-region { display: none; }

.list-item.is-selected > .item-drag-handle { opacity: var(--ui-object-handle-opacity-selected); }

.panel-items {
  position: relative;
  --item-indent-step: 20px;
  --item-handle-track-size: 15px;
  --item-marker-track-size: 16px;
  --item-text-marker-gap: 2px;
  --item-leading-control-block-size: calc(1lh + 2px);
  --item-handle-inline-shift: 0px;
  --item-handle-inline-shift-plain: 8px;
  --item-handle-inline-shift-numbered: -4px;
  --item-handle-inline-shift-checklist: -5px;
}
.panel-items > .list-item { z-index: 1; }
.content-block--list[data-list-style="plain"] .item-list-marker { visibility: hidden; }
.content-block--list[data-list-style="plain"] .list-item {
  --item-marker-track-size: 14px;
  --item-text-marker-gap: 0px;
  --item-handle-inline-shift: var(--item-handle-inline-shift-plain);
}
.content-block--list[data-list-style="numbered"] .list-item {
  --item-handle-inline-shift: var(--item-handle-inline-shift-numbered);
}
.content-block--list[data-list-style="checklist"] .list-item {
  --item-handle-inline-shift: var(--item-handle-inline-shift-checklist);
}
.content-block--list:not([data-list-style="checklist"]) .list-item[data-level="0"] {
  --item-marker-track-size: 14px;
  --item-text-marker-gap: 0px;
  --item-handle-inline-shift: var(--item-handle-inline-shift-plain);
}
.content-block--list:not([data-list-style="checklist"]) .list-item[data-level="0"] .item-list-marker { visibility: hidden; }
.list-item.has-item-time {
  grid-template-columns:
    var(--item-handle-track-size)
    var(--item-marker-track-size)
    minmax(0, 1fr)
    auto;
}

.item-drag-handle {
  position: relative;
  inset-inline-start: var(--item-handle-inline-shift);
  align-self: start;
  justify-self: center;
  display: grid;
  place-items: center;
  width: var(--ui-icon-button-size);
  height: var(--item-leading-control-block-size);
  font-size: var(--item-font-size);
  line-height: var(--item-line-height);
}

.item-drag-handle::before {
  width: 12px;
  height: 4px;
  background:
    radial-gradient(circle, currentColor 0 2px, transparent 2.25px) 0 50% / 4px 4px no-repeat,
    radial-gradient(circle, currentColor 0 2px, transparent 2.25px) 8px 50% / 4px 4px no-repeat;
  content: "";
  translate: 0 var(--ui-object-handle-glyph-block-shift);
}

.list-item:hover > .item-drag-handle,
.item-drag-handle:focus-visible { opacity: var(--ui-object-handle-opacity-active); }

.list-item.is-empty-line > .item-drag-handle,
.list-item.is-empty-line > .item-list-marker {
  visibility: hidden;
  pointer-events: none;
}

.item-list-marker {
  display: grid;
  align-self: start;
  place-items: center end;
  min-width: 0;
  height: var(--item-leading-control-block-size);
  padding: 0;
  padding-inline-end: var(--ui-object-row-marker-gap);
  border: 0;
  color: var(--item-text-color, var(--muted-color));
  background: transparent;
  font-size: var(--item-font-size);
  line-height: var(--item-line-height);
}

.item-list-marker__glyph {
  display: block;
  line-height: 1;
  translate: 0 var(--ui-object-marker-glyph-block-shift);
}

.item-bullet-marker > .item-list-marker__glyph {
  translate: 0 var(--ui-object-bullet-glyph-block-shift);
}

.list-item[data-level="1"] > .item-list-marker {
  font-family: var(--level1-font-family, var(--regular-font-family, var(--font-family)));
  font-size: var(--level1-font-size, var(--list-level-1-size));
  font-weight: var(--level1-font-weight, var(--list-item-weight));
}
.list-item[data-level="2"] > .item-list-marker {
  font-family: var(--level2-font-family, var(--regular-font-family, var(--font-family)));
  font-size: var(--level2-font-size, var(--list-level-2-size));
  font-weight: var(--level2-font-weight, var(--list-item-weight));
}

button.item-list-marker { cursor: pointer; }
.item-checklist-marker {
  padding-inline-end: 4px;
  overflow: visible;
}
.item-checklist-marker__box {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
  translate: 0 var(--ui-object-marker-glyph-block-shift);
  border-radius: 3px;
  background: var(--ui-control-bg);
}
.item-checklist-marker__box::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 6px;
  transform: translate(-50%, -58%) rotate(45deg);
  border-right: 1.5px solid var(--text-color);
  border-bottom: 1.5px solid var(--text-color);
  opacity: 0;
  content: "";
}
.list-item.is-checked > .item-checklist-marker .item-checklist-marker__box::after { opacity: 1; }
.item-checklist-marker:hover .item-checklist-marker__box {
  background: color-mix(in srgb, var(--text-color) 7%, var(--ui-control-bg));
}
.item-bullet-marker[data-bullet-style="red"] { color: var(--bullet-red); }
.item-bullet-marker[data-bullet-style="orange"] { color: var(--bullet-orange); }
.item-bullet-marker[data-bullet-style="blue"] { color: var(--bullet-blue); }
.item-bullet-marker[data-bullet-style="green"],
.item-bullet-marker[data-bullet-style="check"] { color: var(--bullet-green); }
.item-bullet-marker[data-bullet-style="black"],
.item-bullet-marker[data-bullet-style="blackLarge"] { color: var(--bullet-black); }
.item-bullet-marker[data-bullet-style="cross"] { color: var(--bullet-red); }
.list-item[data-level] > .item-list-marker.item-bullet-marker:is(
  [data-bullet-style="red"],
  [data-bullet-style="orange"],
  [data-bullet-style="blue"],
  [data-bullet-style="green"],
  [data-bullet-style="blackLarge"]
) > .item-list-marker__glyph {
  scale: 1.75;
  transform-origin: center;
}
.item-bullet-marker:hover,
.item-bullet-marker[aria-expanded="true"] { filter: brightness(.78); }
.list-item.is-checked[data-level] > .item-editor { color: #a4a7a0; }

.item-editor {
  min-width: 0;
  min-height: 1em;
  padding: 1px 0;
  padding-inline-start: var(--item-text-marker-gap);
  outline: none;
  color: var(--item-text-color, color-mix(in srgb, var(--text-color) 84%, var(--canvas-bg)));
  font-family: var(--regular-font-family, var(--font-family));
  font-size: var(--regular-font-size, var(--font-size));
  font-weight: var(--regular-font-weight, var(--list-item-weight));
  line-height: var(--item-line-height);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.list-item:is(.is-image-item, .is-drawing-item) { align-items: start; }
.list-item:is(.is-image-item, .is-drawing-item) > :is(.workspace-image-button, .drawing-preview) { margin: 3px 0 7px; }
.list-item:is(.is-image-item, .is-drawing-item)[data-level="0"] > :is(.workspace-image-button, .image-upload-placeholder, .drawing-preview) { width: min(100%, 190px); }
.list-item:is(.is-image-item, .is-drawing-item)[data-level="1"] > :is(.workspace-image-button, .image-upload-placeholder, .drawing-preview) { width: min(100%, 108px); }
.list-item:is(.is-image-item, .is-drawing-item)[data-level="2"] > :is(.workspace-image-button, .image-upload-placeholder, .drawing-preview) { width: min(100%, 44px); }
.list-item.is-drawing-item[data-level="1"] > .drawing-preview { font-size: 19px; }
.list-item.is-drawing-item[data-level="2"] > .drawing-preview { font-size: 15px; line-height: 1; }
.list-item.is-image-item > .image-upload-placeholder { min-height: 62px; margin: 3px 0 7px; }
.list-item.is-image-item[data-level="1"] > .image-upload-placeholder { min-height: 54px; }
.list-item.is-image-item[data-level="2"] > .image-upload-placeholder { min-height: 36px; font-size: 16px; }
.list-item[data-text-alignment="center"] > :is(.workspace-image-button, .image-upload-placeholder, .drawing-preview) { justify-self: center; }

.list-item[data-level="0"] > .item-editor {
  color: var(--item-text-color, var(--text-color));
  font-family: var(--level0-font-family, var(--regular-font-family, var(--font-family)));
  font-size: var(--level0-font-size, var(--list-level-0-size));
  font-weight: var(--level0-font-weight, var(--list-root-weight));
  letter-spacing: -.005em;
}

.list-item[data-level="1"] > .item-editor {
  color: var(--item-text-color, color-mix(in srgb, var(--text-color) 84%, var(--canvas-bg)));
  font-family: var(--level1-font-family, var(--regular-font-family, var(--font-family)));
  font-size: var(--level1-font-size, var(--list-level-1-size));
  font-weight: var(--level1-font-weight, var(--list-item-weight));
}

.list-item[data-level="2"] > .item-editor {
  color: var(--item-text-color, color-mix(in srgb, var(--text-color) 70%, var(--canvas-bg)));
  font-family: var(--level2-font-family, var(--regular-font-family, var(--font-family)));
  font-size: var(--level2-font-size, var(--list-level-2-size));
  font-weight: var(--level2-font-weight, var(--list-item-weight));
}

.item-editor:focus { caret-color: var(--ui-accent); }

.canvas ::selection,
::highlight(cross-item-selection) {
  color: var(--ui-editor-text-selection-foreground);
  background: var(--ui-editor-text-selection-background);
}

body.is-cross-item-selecting { user-select: none; }

.is-cross-text-object-selected > :is(
  .workspace-image-button,
  .image-upload-placeholder,
  .drawing-preview
) {
  border-radius: var(--ui-radius-item-selection);
  box-shadow: 0 0 0 3px var(--ui-editor-text-selection-background);
}

.list-item[data-level] > .item-editor.is-standalone-url {
  padding-inline-end: 20px;
  color: var(--item-text-color, color-mix(in srgb, var(--ui-accent) 72%, var(--text-color)));
  text-decoration: none;
}

.list-item[data-level] > .item-editor.is-standalone-url:hover,
.list-item[data-level] > .item-editor.is-standalone-url:focus {
  color: var(--ui-accent);
}

.list-item.is-checked[data-level] > .item-editor.is-standalone-url { color: #a4a7a0; }

.item-open-link {
  position: absolute;
  top: 1px;
  inset-inline-end: 1px;
  display: grid;
  place-items: center;
  width: var(--ui-icon-button-size);
  height: var(--ui-icon-button-size);
  padding: 0;
  border: 0;
  color: var(--muted-color);
  background: color-mix(in srgb, var(--canvas-bg) 88%, transparent);
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  transition: color 100ms ease, opacity 100ms ease;
}

.item-open-link::before { content: "\2197"; pointer-events: none; }
.list-item:hover > .item-open-link,
.item-open-link:focus-visible { opacity: .78; }
.item-open-link:hover { color: var(--ui-accent); opacity: 1; }
.item-open-link[hidden] { display: none; }

.item-time-badge {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 1lh;
  max-width: 104px;
  margin-inline-start: 8px;
  padding: 0;
  border: 0;
  color: var(--muted-color);
  background: transparent;
  font-family: var(--regular-font-family, var(--font-family));
  font-size: var(--item-font-size);
  font-weight: 450;
  line-height: var(--item-line-height);
  white-space: nowrap;
  cursor: pointer;
}
.item-time-badge__icon { font-size: 11px; line-height: 1; }
.item-time-badge__label { overflow: hidden; font-size: 9px; line-height: 1; text-overflow: ellipsis; transform: translateY(1px); }
.item-time-badge:hover { color: var(--text-color); }
.item-time-badge.is-elapsed { color: color-mix(in srgb, var(--bullet-red, #c25d51) 72%, var(--muted-color)); }
.item-time-badge.is-urgent {
  height: auto;
  min-height: 1lh;
  max-width: 150px;
  color: var(--bullet-red, #c25d51);
  font-weight: 700;
}
.item-time-badge.is-urgent:hover { color: var(--bullet-red, #c25d51); }
.item-time-badge.is-urgent .item-time-badge__icon { font-size: .8em; }
.item-time-badge.is-urgent .item-time-badge__label { font-size: 1em; font-weight: 700; transform: none; }

.item-drop-placeholder {
  position: relative;
  z-index: 2;
  margin-inline-start: calc(var(--placeholder-level) * var(--item-indent-step));
  box-sizing: border-box;
  border: 0;
  border-radius: var(--ui-radius-placeholder);
  background: color-mix(in srgb, var(--muted-color) 10%, transparent);
}

.list-item.is-drop-parent {
  background: color-mix(in srgb, var(--ui-accent) 5%, transparent);
}

.item-drag-ghost {
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
}

.item-drag-ghost .list-item.is-selected {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.is-dragging-item .item-drag-ghost > .item-drag-selection-region {
  display: block;
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface-drag-preview));
}

.item-drag-ghost .item-drag-handle { opacity: .35; }
.list-item.is-drag-source { display: none; }

body.is-dragging-item,
body.is-dragging-item * {
  cursor: grabbing !important;
  user-select: none;
}