/* Cosmic overlay for stock Kaneo. Scoped to [data-cx-*] hooks added by cosmic-overlay.js. */
[data-cx-root] {
  --cx: #9ca3af;
  gap: 0 !important;
}
[data-cx-root][data-cx-colour="amber"] { --cx: #d97706; }
[data-cx-root][data-cx-colour="blue"]  { --cx: #3b82f6; }
[data-cx-root][data-cx-colour="green"] { --cx: #16a34a; }
[data-cx-root][data-cx-colour="grey"]  { --cx: #9ca3af; }

[data-cx-root] > [data-cx-h1] { display: none; }
[data-cx-root] > [data-slot="timeline"] { display: contents; }

/* order: comments card, then activity card */
[data-cx-root] > [data-cx-head="c"] { order: 10; }
[data-cx-root] [data-cx-body="c"] { order: 11; }
[data-cx-root] > [data-cx-head="a"] { order: 20; }
[data-cx-root] [data-cx-body="a"] { order: 21; }

/* header strips */
[data-cx-head] {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--cx);
  border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, var(--cx) 16%, transparent);
  padding: 7px 12px;
  font-size: 12px; font-weight: 600; line-height: 1.3;
  color: var(--foreground, inherit);
}
[data-cx-head][data-cx-pos="last"] { border-radius: 12px; }
[data-cx-head] .cx-state { font-weight: 500; opacity: .9; display: inline-flex; align-items: center; gap: 6px; }
[data-cx-head] .cx-state:empty { display: none; }
[data-cx-head] .cx-state::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cx); display: inline-block;
}
[data-cx-head="a"] { margin-top: 16px; }
[data-cx-head][data-cx-empty] { display: none; }

/* card bodies */
[data-cx-body] {
  border-left: 1px solid var(--cx);
  border-right: 1px solid var(--cx);
  background: color-mix(in srgb, var(--cx) 4%, transparent);
  padding: 10px 12px 0 !important;
  margin: 0 !important;
  flex: none !important;
  min-width: 0;
}
[data-cx-body][data-cx-pos="last"] {
  border-bottom: 1px solid var(--cx);
  border-radius: 0 0 12px 12px;
  padding-bottom: 12px !important;
}
[data-cx-body][data-cx-kind="editor"] > * { margin-top: 0; }
[data-cx-body][data-cx-kind="comment"] { padding-top: 0 !important; }
[data-cx-body][data-cx-kind="comment"] > [data-slot="timeline-content"] { padding-top: 10px; }
[data-cx-body][data-cx-kind="comment"] > [data-slot="timeline-content"] > div { max-width: 100%; }

/* Claude-authored comments */
[data-cx-author="claude"] { border-left: 3px solid #8b5cf6 !important; }

/* events: compact, one line, small grey */
[data-cx-body][data-cx-kind="event"] {
  padding: 3px 12px !important;
}
[data-cx-body][data-cx-kind="event"][data-cx-pos="last"] { padding-bottom: 10px !important; }
[data-cx-body][data-cx-kind="event"] > span,
[data-cx-body][data-cx-kind="event"] > [data-slot="avatar"] { display: none !important; }
[data-cx-body][data-cx-kind="event"] [data-slot="timeline-content"] {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--muted-foreground, #888) !important;
}
[data-cx-body][data-cx-kind="event"] [data-slot="timeline-content"] * {
  font-size: 11px !important; line-height: 1.5 !important; color: inherit !important;
  display: inline !important; font-weight: 400 !important;
}
[data-cx-body][data-cx-kind="event"] [data-slot="timeline-content"] span + span { margin-left: .3em; }

/* markdown headings visible in comments */
section[aria-label="Comment content"] .ProseMirror h1,
section[aria-label="Comment content"] .ProseMirror h2,
section[aria-label="Comment content"] .ProseMirror h3,
section[aria-label="Comment content"] .ProseMirror h4,
.cx-fold-body h1, .cx-fold-body h2, .cx-fold-body h3, .cx-fold-body h4 {
  font-weight: 650; line-height: 1.3; margin: .9em 0 .35em; color: var(--foreground, inherit);
}
section[aria-label="Comment content"] .ProseMirror h1, .cx-fold-body h1 { font-size: 1.15rem; }
section[aria-label="Comment content"] .ProseMirror h2, .cx-fold-body h2 { font-size: 1.05rem; }
section[aria-label="Comment content"] .ProseMirror h3, .cx-fold-body h3 { font-size: .98rem; }
section[aria-label="Comment content"] .ProseMirror h4, .cx-fold-body h4 { font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; opacity: .85; }
section[aria-label="Comment content"] .ProseMirror > :first-child { margin-top: 0; }

/* folded technical detail */
.ProseMirror[data-cx-fold-from="1"] > :nth-child(n+1),
.ProseMirror[data-cx-fold-from="2"] > :nth-child(n+2),
.ProseMirror[data-cx-fold-from="3"] > :nth-child(n+3),
.ProseMirror[data-cx-fold-from="4"] > :nth-child(n+4),
.ProseMirror[data-cx-fold-from="5"] > :nth-child(n+5),
.ProseMirror[data-cx-fold-from="6"] > :nth-child(n+6),
.ProseMirror[data-cx-fold-from="7"] > :nth-child(n+7),
.ProseMirror[data-cx-fold-from="8"] > :nth-child(n+8),
.ProseMirror[data-cx-fold-from="9"] > :nth-child(n+9),
.ProseMirror[data-cx-fold-from="10"] > :nth-child(n+10),
.ProseMirror[data-cx-fold-from="11"] > :nth-child(n+11),
.ProseMirror[data-cx-fold-from="12"] > :nth-child(n+12),
.ProseMirror[data-cx-fold-from="13"] > :nth-child(n+13),
.ProseMirror[data-cx-fold-from="14"] > :nth-child(n+14),
.ProseMirror[data-cx-fold-from="15"] > :nth-child(n+15),
.ProseMirror[data-cx-fold-from="16"] > :nth-child(n+16),
.ProseMirror[data-cx-fold-from="17"] > :nth-child(n+17),
.ProseMirror[data-cx-fold-from="18"] > :nth-child(n+18),
.ProseMirror[data-cx-fold-from="19"] > :nth-child(n+19),
.ProseMirror[data-cx-fold-from="20"] > :nth-child(n+20),
.ProseMirror[data-cx-fold-from="21"] > :nth-child(n+21),
.ProseMirror[data-cx-fold-from="22"] > :nth-child(n+22),
.ProseMirror[data-cx-fold-from="23"] > :nth-child(n+23),
.ProseMirror[data-cx-fold-from="24"] > :nth-child(n+24),
.ProseMirror[data-cx-fold-from="25"] > :nth-child(n+25),
.ProseMirror[data-cx-fold-from="26"] > :nth-child(n+26),
.ProseMirror[data-cx-fold-from="27"] > :nth-child(n+27),
.ProseMirror[data-cx-fold-from="28"] > :nth-child(n+28),
.ProseMirror[data-cx-fold-from="29"] > :nth-child(n+29),
.ProseMirror[data-cx-fold-from="30"] > :nth-child(n+30) { display: none !important; }

details[data-cx-own] {
  margin: 10px 12px 12px; border: 1px solid var(--border, rgba(128,128,128,.35)); border-radius: 8px;
  background: color-mix(in srgb, var(--muted-foreground, #888) 8%, transparent);
}
details[data-cx-own] > summary {
  cursor: pointer; list-style: none; padding: 6px 10px; font-size: 12px; font-weight: 600;
  color: var(--muted-foreground, inherit); user-select: none;
}
details[data-cx-own] > summary::-webkit-details-marker { display: none; }
details[data-cx-own] > summary::after { content: " \25B8"; }
details[data-cx-own][open] > summary::after { content: " \25BE"; }
details[data-cx-own] > .cx-fold-body { padding: 0 10px 8px; font-size: 13px; overflow-x: auto; }

@media (max-width: 640px) {
  [data-cx-head], [data-cx-body] { padding-left: 8px !important; padding-right: 8px !important; }
  details[data-cx-own] { margin-left: 8px; margin-right: 8px; }
}

/* wrapped task title (see wrapTitle in cosmic-overlay.js) */
input[data-cx-title-hidden] { display: none !important; }
[data-cx-title] { white-space: normal !important; overflow-wrap: anywhere; cursor: text; user-select: text; }
@media (max-width: 640px) { [data-cx-title] { font-size: 1.4rem !important; } }