.list-item {
  position: relative;
  display: grid;
  grid-template-columns:
    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--list[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--list[data-content-mode="text"] .list-item {
  --item-font-size: var(--regular-font-size, var(--font-size));
  --item-line-height: var(--content-line-height, var(--line-height));
  --item-spacing: var(--level0-item-spacing, 6px);
  --item-marker-track-size: 0px;
  --item-text-marker-gap: 0px;
}
.content-block--list[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--list[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--list[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--list[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--list[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--list[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 {
  --item-selection-fill: color-mix(in srgb, var(--ui-accent) 9%, transparent);
  position: absolute;
  z-index: 0;
  border-radius: var(--ui-radius-item-selection);
  pointer-events: none;
}

.item-selection-region::before {
  content: "";
  position: absolute;
  inset: 0;
  inset-inline-start: calc(-1 * var(--ui-object-selection-inline-outset));
  border-radius: inherit;
  background: var(--item-selection-fill);
}

.item-selection-region.is-placed {
  --item-selection-fill: var(--ui-control-bg);
}
.item-selection-region--media,
.item-selection-region--media.is-placed { --item-selection-fill: transparent; }

.list-item:is(.is-image-item, .is-drawing-item).is-selected
  > :is(.workspace-image-button, .image-upload-placeholder, .drawing-preview) {
  outline: 2px solid var(--ui-accent);
  outline-offset: -2px;
}

.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: 14px;
  --item-handle-hit-size: 14px;
  --item-handle-marker-gap: 2px;
  --item-marker-track-size: 16px;
  --item-text-marker-gap: 2px;
  --item-leading-control-block-size: calc(1lh + 2px);
}
.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: 0px;
  --item-text-marker-gap: 0px;
}
.content-block--list:not([data-list-style="checklist"]) .list-item[data-level="0"] {
  --item-marker-track-size: 0px;
  --item-text-marker-gap: 0px;
}
.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-marker-track-size)
    minmax(0, 1fr)
    auto;
}

.ui-object-drag-handle.item-drag-handle {
  position: absolute;
  inset-inline-start: calc(-1 * var(--item-handle-hit-size) - var(--item-handle-marker-gap));
  align-self: start;
  justify-self: center;
  display: grid;
  place-items: center;
  width: var(--item-handle-hit-size);
  height: var(--item-leading-control-block-size);
  color: var(--ui-object-handle-color);
  font-size: var(--item-font-size);
  line-height: var(--item-line-height);
  cursor: default;
  transition: color 100ms ease, opacity 100ms ease;
}

.item-drag-handle::before {
  width: 9px;
  height: 4px;
  background:
    radial-gradient(circle, currentColor 0 1.75px, transparent 2px) 0 50% / 4px 4px no-repeat,
    radial-gradient(circle, currentColor 0 1.75px, transparent 2px) 5px 50% / 4px 4px no-repeat;
  content: "";
  scale: 1;
  translate: 0 var(--ui-object-handle-glyph-block-shift);
  transition: scale 100ms ease;
}

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

.item-drag-handle:hover,
.item-drag-handle:focus-visible { color: var(--ui-accent); }

.item-drag-handle:hover::before,
.item-drag-handle:focus-visible::before { scale: 1.25; }

.ui-object-drag-handle.item-drag-handle:active { cursor: grabbing; }

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

/* Empty rows are writing space, not a smaller inherited hierarchy role. */
.content-block--list:not([data-content-mode="text"]) .list-item.is-spacer {
  --item-font-size: var(--level0-font-size, var(--list-level-0-size));
  --item-line-height: var(--level0-line-height, var(--content-line-height, var(--line-height)));
  --item-spacing: var(--level0-item-spacing, 6px);
}
.content-block--list:not([data-content-mode="text"]) .list-item.is-spacer > .item-editor {
  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));
  line-height: var(--item-line-height);
}

.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: 1lh;
  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; }

/* Disclosure is trailing editor chrome, separate from the leading drag/marker gutter. */
.list-item.has-item-disclosure { padding-inline-end: var(--ui-icon-button-size); }
.item-disclosure {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  inline-size: var(--ui-icon-button-size);
  block-size: max(var(--ui-icon-button-size), calc(var(--item-font-size) * var(--item-line-height)));
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-field);
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.item-disclosure::before {
  content: "";
  inline-size: 8px;
  block-size: 5px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.item-disclosure[aria-expanded="false"]::before { transform: rotate(180deg); }
.list-item:hover > .item-disclosure,
.item-disclosure:focus-visible,
.item-disclosure[aria-expanded="false"] { opacity: 1; pointer-events: auto; }
.item-disclosure:is(:hover, :focus-visible) { color: var(--ui-accent); }
.item-disclosure:focus-visible { outline: 1px solid var(--ui-accent); outline-offset: -1px; }
.has-item-disclosure > .item-open-link { inset-inline-end: var(--ui-icon-button-size); }
.list-item.has-item-disclosure.has-standalone-url { padding-inline-end: calc(2 * var(--ui-icon-button-size)); }
.item-drag-ghost .item-disclosure,
.panel-drag-ghost .item-disclosure,
.block-drag-ghost .item-disclosure { 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);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--ui-accent) 72%, 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;
  --item-selection-fill: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface-drag-preview));
}

.is-dragging-item .item-drag-ghost > .item-drag-selection-region.item-selection-region--media {
  --item-selection-fill: transparent;
}

.item-drag-ghost .list-item:is(.is-image-item, .is-drawing-item)
  > :is(.workspace-image-button, .image-upload-placeholder, .drawing-preview) {
  outline: 2px solid var(--ui-accent);
  outline-offset: -2px;
}

.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;
}