/* The browser's own default <ul> padding-left (~2.5rem) and margin would stack on top of every
   line's own --mlp-checklist-depth margin below, making even an unindented (top-level) line
   look far more indented than the plain Markdown textarea it's a view of. Real sizing/box
   padding for this element is the consuming platform's own concern (platform.css gives it the
   same border/background/padding box as the Markdown textarea) — this only removes the
   browser's own default list-marker indent and block margin, not all padding. */
[data-mlp-checklist-rendered] {
  list-style: none;
  margin: 0;
}

.mlp-checklist__item,
.mlp-checklist__bullet {
  /* --mlp-checklist-depth is set per-line in src/index.js from the line's own leading
     indentation (checklist-logic.js's indentDepth()) — a real nested/child bullet or checklist
     item indents proportionally, not just cosmetically. */
  margin-left: calc(var(--mlp-checklist-depth, 0) * 1.5rem);
}

.mlp-checklist__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Drag-to-indent/outdent handle (`TASK-9`) — the mobile equivalent of Tab/Shift+Tab, which has
   no physical-key counterpart on a touchscreen. A plain Braille-pattern glyph (U+283F, a dense
   dot grid), not an icon asset — this package has no icon mechanism of its own and one glyph
   doesn't earn adding one. `touch-action: none` is load-bearing, not decoration: without it, a
   touch-drag starting here scrolls the page instead of reaching src/index.js's own pointermove
   handler. `cursor: grab`/`:active` grabbing feedback is free for a mouse; touch has no
   equivalent, hence the dragging modifier below carrying the real visual feedback instead. */
.mlp-checklist__grip {
  flex-shrink: 0;
  color: var(--c-text-muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.mlp-checklist__grip:active {
  cursor: grabbing;
}

/* Real-time visual feedback while a drag is in progress (src/index.js's own pointermove/endDrag
   toggles this) — the dragged row itself stays exactly where it started (the drop-indicator
   below shows the prospective new position/depth instead), just dimmed so it reads as "the thing
   being moved" rather than merely hovered. A checked row's own :has() dimming (above) already
   claims color/text-decoration, so this uses opacity instead, applying regardless of checked
   state. */
.mlp-checklist__item--dragging {
  opacity: 0.5;
}

/* A real, directly-editable row (TASK-2) — not a <label>-wrapped string (a <label> forwards
   clicks to the control it wraps, which would toggle the checkbox every time someone clicks
   into the text to edit it, so checkbox and text are plain flex siblings instead). Styled to
   read as plain text until focused, the same "looks inert until you interact with it" idea
   `.field input[readonly]` (platform.css) already uses elsewhere on this platform, just for a
   genuinely editable control rather than a read-only one. */
.mlp-checklist__text {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  padding: 0.15rem 0.35rem;
  /* Real feedback ("input borders seem larger than row height"): the negative margin below only
     ever offset the padding, not the 1px border on top of it — even transparent, an unaccounted-
     for border still adds its own 2px (top+bottom) to this row's real, laid-out height against
     the checkbox beside it. Offsetting the border's own width here too is what actually makes
     this input's real footprint match plain, unstyled text exactly, the way the comment above
     already describes it as trying to. */
  margin: calc(-0.15rem - 1px) calc(-0.35rem - 1px);
  background: none;
  color: inherit;
  font: inherit;
}

.mlp-checklist__text:hover,
.mlp-checklist__text:focus {
  border-color: var(--c-border-strong);
  background: var(--c-surface-raised);
}

.mlp-checklist__text:focus {
  outline: none;
}

/* Real feedback (`TASK-5`): a checked item's checkbox was the only visual sign it was done —
   Google Keep also dims and strikes through the text itself. `:has()` (broadly supported in
   every browser this platform already targets) reaches from the row's own checkbox to its
   sibling text input without any JS needed to toggle a class on check/uncheck. */
.mlp-checklist__item:has(> input[type='checkbox']:checked) .mlp-checklist__text {
  color: var(--c-text-muted);
  text-decoration: line-through;
}

.mlp-checklist__bullet {
  list-style: disc;
  margin-left: calc(var(--mlp-checklist-depth, 0) * 1.5rem + 1.25rem);
}

.mlp-checklist__blank {
  height: 1em;
}

/* Google Keep's own "+ List item" — appends a new empty item at the end
   (checklist-logic.js's appendChecklistLine()). Muted until hovered, matching how a
   not-yet-real row should read as less prominent than the real items above it. */
.mlp-checklist__add {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: none;
  color: var(--c-text-muted);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.mlp-checklist__add:hover {
  border-color: var(--c-border-strong);
  background: var(--c-surface-raised);
  color: var(--c-text);
}

.mlp-checklist-status--error {
  color: var(--c-danger);
}

/* Checked items sink into a separate, collapsible "N Completed items" section (`TASK-4`) rather
   than staying inline — the summary <li> src/index.js builds holds a toggle button plus a
   nested <ul>, matching Google Keep's own real layout (shared screenshots). */
.mlp-checklist__completed {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--c-border);
}

.mlp-checklist__completed-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.15rem 0;
  border: none;
  background: none;
  color: var(--c-text-muted);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* A plain CSS triangle rather than an icon font/SVG — this package has no icon mechanism of its
   own, and one glyph doesn't earn adding one. Rotates via `aria-expanded`, which src/index.js's
   own toggle handler already keeps in sync — no separate JS-driven class needed for the glyph. */
.mlp-checklist__completed-toggle::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.35em solid currentColor;
  transition: transform 0.1s ease;
}

.mlp-checklist__completed-toggle[aria-expanded='false']::before {
  transform: rotate(-90deg);
}

.mlp-checklist__completed-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

/* An unchecked ancestor duplicated into the completed section purely to give a checked
   descendant its own real parent context (`TASK-4`) — dimmed like a checked row's own text, but
   not struck through (it isn't itself checked — see the :has() rule above). Real and
   interactive, not decorative: checking it here checks the real line, cascading to its own
   still-unchecked children the same as it would from the active list above. */
.mlp-checklist__item--ghost {
  opacity: 0.6;
}

/* Drag-to-reorder (`TASK-9` follow-up) is restricted to the active list — a checked/ghost row's
   own grip inside the completed section is inert (src/index.js's own pointerdown guard already
   ignores it; this just makes that visible/expected rather than a dead-looking control). */
.mlp-checklist__completed .mlp-checklist__grip {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* The live drop-target preview a drag paints as it moves (src/index.js's own pointermove
   handler) — a thin colored bar, indented to the same --mlp-checklist-depth every real row
   uses, so its horizontal position previews exactly where/how-deep the row would land. Never
   present outside an active drag; src/index.js removes it on pointerup/pointercancel. */
.mlp-checklist__drop-indicator {
  height: 3px;
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
  margin-left: calc(var(--mlp-checklist-depth, 0) * 1.5rem);
  border-radius: 2px;
  background: var(--c-accent);
}