/* No Time v3 — CLARITY direction. Airy, evergreen, quietly confident.
   Token names kept stable; values mapped to the Clarity palette. */
:root {
  --bg: #f6f7f5;
  --side: #f0f2ee;
  --card: #ffffff;
  --active: #ffffff;
  --chip: #eef0ec;
  --line: #e6e8e4;
  --line-strong: #d3d8d1;
  --text: #1e2420;
  --text-dim: #7c847d;
  --accent: #2f6b53;
  --danger: #c0503f;
  --ok: #2f8f6a;
  --ok-chip: #e3f1ea;
  --star-text: #a9761a;
  --star-bg: #fdfaf2;
  --star-line: #efe1c4;
  --star-chip: #f6ecd8;
  --rail-btn: #eef0ec;
  --rail-btn-text: #4b524b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151714;
    --side: #12140f;
    --card: #1d201b;
    --active: #262a23;
    --chip: #242821;
    --line: #2b2f27;
    --line-strong: #3a4034;
    --text: #e8ebe4;
    --text-dim: #8b948a;
    --accent: #63ab88;
    --danger: #d16a58;
    --ok: #4fae83;
    --ok-chip: #1b342a;
    --star-text: #d5a548;
    --star-bg: #1e1d14;
    --star-line: #3a3320;
    --star-chip: #332b17;
    --rail-btn: #242821;
    --rail-btn-text: #b6bdb2;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nt-dragging, body.nt-dragging * { cursor: grabbing !important; }

/* Feel-good motion (lib/motion.svelte.ts). These are global because the list
   transitions add them to elements at runtime. `.nt-row` wraps a TaskCard in a
   keyed list so `animate:` has an element to move; it carries the drag
   engine's sibling displacement, so it needs the glide the card used to own —
   but only mid-drag: a leaving row gets pinned with an inline transform, and
   a transition on that would outrank (and wreck) its WAAPI exit. */
.nt-row { position: relative; }
body.nt-dragging .nt-row { transition: transform .18s cubic-bezier(.2, 0, 0, 1); }
.nt-completing > .card { border-color: var(--ok); }
.nt-done-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 13%, transparent);
  pointer-events: none;
  animation: nt-mark-in 120ms ease-out both;
}
.nt-done-mark svg { width: 24px; height: 24px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nt-done-mark circle { stroke-dasharray: 63; stroke-dashoffset: 63; animation: nt-draw 200ms cubic-bezier(.2, 0, 0, 1) forwards; }
.nt-done-mark path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: nt-draw 170ms 80ms cubic-bezier(.2, 0, 0, 1) forwards; }
@keyframes nt-draw { to { stroke-dashoffset: 0; } }
@keyframes nt-mark-in { from { opacity: 0; } }
.nt-arrived { animation: nt-arrive-glow 1.1s ease-out; }
@keyframes nt-arrive-glow {
  0%, 30% { background-color: var(--ok-chip); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 35%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.ProseMirror {
  position: relative;
  min-height: 280px;
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}
.ProseMirror p,
.ProseMirror ul,
.ProseMirror ol,
.ProseMirror blockquote,
.ProseMirror pre,
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
  margin: 0 0 0.85em;
}
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
  line-height: 1.25;
  font-weight: 750;
}
.ProseMirror h1 { font-size: 1.55rem; }
.ProseMirror h2 { font-size: 1.3rem; }
.ProseMirror h3 { font-size: 1.12rem; }
.ProseMirror ul,
.ProseMirror ol {
  padding-left: 1.45rem;
}
.ProseMirror li {
  margin: 0.25em 0;
}
.ProseMirror li.pm-task-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
  list-style: none;
  margin-left: -1.45rem;
}
.ProseMirror li.pm-task-item > input[data-task-checkbox] {
  width: 15px;
  height: 15px;
  margin: 0.38em 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.ProseMirror li.pm-task-item > .pm-task-content {
  min-width: 0;
}
.ProseMirror li.pm-task-item > .pm-task-content > :last-child {
  margin-bottom: 0;
}
.ProseMirror blockquote {
  border-left: 3px solid var(--line-strong);
  color: var(--text-dim);
  padding-left: 12px;
}
.ProseMirror pre {
  overflow-x: auto;
  border-radius: 8px;
  background: var(--chip);
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.ProseMirror code {
  border-radius: 5px;
  background: var(--chip);
  padding: 0.1em 0.28em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.ProseMirror pre code {
  background: transparent;
  padding: 0;
}
.ProseMirror img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  vertical-align: middle;
}
.ProseMirror-selectednode {
  outline: 2px solid var(--accent);
}
.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}
.ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid var(--text);
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}
.pm-parse-fallback {
  min-height: 280px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.65;
}

@keyframes ProseMirror-cursor-blink {
  to { visibility: hidden; }
}

@media (max-width: 640px) {
  .ProseMirror,
  .pm-parse-fallback {
    min-height: 220px;
  }
}