/* Kaneo subtask affordance — local addition, not part of upstream Kaneo.
 * Paired with kaneo-subtasks.js.
 *
 * NOTE: cards are plain elements, not anchors — do not scope these selectors
 * to `a`. Kaneo is Tailwind-based with high-specificity utility classes on the
 * card, so the few properties that must win carry !important deliberately.
 */

:root {
  --kaneo-sub-indent: 16px;
  --kaneo-sub-rule: rgba(125, 125, 140, 0.55);
  --kaneo-sub-fg: rgba(120, 120, 135, 1);
  --kaneo-sub-bg: rgba(125, 125, 140, 0.12);
  --kaneo-sub-border: rgba(125, 125, 140, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --kaneo-sub-rule: rgba(165, 165, 180, 0.45);
    --kaneo-sub-fg: rgba(175, 175, 190, 1);
    --kaneo-sub-bg: rgba(165, 165, 185, 0.14);
    --kaneo-sub-border: rgba(165, 165, 185, 0.30);
  }
}

:root[class~="dark"],
html.dark {
  --kaneo-sub-rule: rgba(165, 165, 180, 0.45);
  --kaneo-sub-fg: rgba(175, 175, 190, 1);
  --kaneo-sub-bg: rgba(165, 165, 185, 0.14);
  --kaneo-sub-border: rgba(165, 165, 185, 0.30);
}

/* The child card: indented, slightly narrower, with a rule down the left so
 * the nesting reads even when the tag is clipped. */
.kaneo-subtask {
  margin-left: var(--kaneo-sub-indent) !important;
  border-left: 2px solid var(--kaneo-sub-rule) !important;
  border-radius: 8px;
}

/* Board: the decorated element is a wrapper that already has padding, so
 * adding our own leaves a visible gap between the rule and the card. */
.kaneo-subtask[data-kaneo-view="board"] {
  padding-left: 0 !important;
  margin-left: 10px !important;
}

/* List: rows have no wrapper padding, so a little breathing room helps. */
.kaneo-subtask[data-kaneo-view="list"] {
  padding-left: 8px !important;
}

/* The tag itself: own line, framed, distinctly smaller than the title. */
.kaneo-subtask-badge {
  display: block !important;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 2px 0 5px 0 !important;
  padding: 1px 7px !important;
  font-size: 10px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--kaneo-sub-fg) !important;
  background: var(--kaneo-sub-bg);
  border: 1px solid var(--kaneo-sub-border);
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* In the list view rows are horizontal; keep the tag inline there so it does
 * not push the title onto a second line. */
.kaneo-subtask-badge[data-inline="1"] {
  display: inline-block !important;
  margin: 0 6px 0 0 !important;
}