/**
 * Jot ProseMirror editor styles.
 *
 * Visual treatment:
 * - Project headers: bold, bright text
 * - Pending todos: muted checkbox marker, full opacity
 * - Done todos: green checkmark, strikethrough, reduced opacity
 * - Plain text: standard foreground color
 */

.jot-editor {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.875rem;
  line-height: 1.75;
  padding: 1rem;
  outline: none;
  min-height: 100%;
  cursor: text;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.jot-editor p {
  margin-top: 0;
  margin-bottom: 0;
}

/* Project header */
.jot-project-header {
  font-weight: 600;
  color: var(--color-foreground);
}

/* Plain paragraph */
.jot-paragraph {
  color: var(--color-foreground);
}

/* Todo items — shared */
.jot-todo {
  display: flex;
  align-items: baseline;
}

/* Wrapper for text + metadata tags — takes remaining space after checkbox */
.jot-todo-content {
  flex: 1;
  min-width: 0;
}

/* Checkbox marker (non-editable) */
.jot-todo-checkbox {
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  font-size: 1.125rem;
  line-height: 1;
}

/* Spacer between checkbox and text */
.jot-todo-spacer {
  flex-shrink: 0;
  width: 0.5ch;
}

/* Pending todo */
.jot-todo-pending {
  color: var(--color-foreground);
}

.jot-todo-pending .jot-todo-checkbox {
  color: var(--color-muted-foreground);
}

/* Done todo */
.jot-todo-done {
  opacity: 0.4;
}

.jot-todo-done .jot-todo-checkbox {
  color: #16a34a;
  opacity: 1;
}

.jot-todo-done .jot-todo-text {
  text-decoration: line-through;
}

/* Text takes its own line so tags sit below it */
.jot-todo-text {
  display: block;
}

/* Metadata tags — inline on a single line below the text */
.jot-started-tag,
.jot-done-tag,
.jot-lasted-tag {
  font-size: 0.75rem;
  user-select: none;
  white-space: nowrap;
  color: var(--color-muted-foreground);
  text-decoration: none;
}

/* Pipe separator between adjacent tags */
.jot-started-tag + .jot-done-tag::before,
.jot-started-tag + .jot-lasted-tag::before,
.jot-done-tag + .jot-lasted-tag::before {
  content: " | ";
}

/* Visual indentation for items following a project header.
   Applied via a ProseMirror decoration plugin (see index.js). */
.jot-indented {
  margin-left: 1.25rem;
}

/* Placeholder for empty editor.
   The `is-empty` class is added/removed by a ProseMirror plugin
   in index.js based on document content. */
.jot-editor.is-empty::before {
  content: attr(data-placeholder);
  color: var(--color-muted-foreground);
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
}

/* Auto-linked URLs — decoration-only, Cmd+Click to open */
.jot-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.jot-editor.cmd-held .jot-link:hover {
  cursor: pointer;
  text-decoration-thickness: 2px;
}

/* Tab label hover underline — text-width underline in the tab's slot color */
.group:hover [data-jots-target="tabLabel"] {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--tab-color) 60%, transparent);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}