/*
 * PAIR — application styles.
 *
 * Tailwind utilities are still available for layout; this file owns the
 * typography, color, and chrome decisions. Goal is a quiet, considered
 * surface — iA-Writer-adjacent without copying it.
 */

:root {
  --cw-bg:        #fafaf7;
  --cw-surface:   #ffffff;
  --cw-ink:       #1f2937;
  --cw-ink-soft:  #4b5563;
  --cw-muted:     #6b7280;
  --cw-faint:     #9ca3af;
  --cw-line:      #e5e7eb;
  --cw-line-soft: #f1f0eb;

  /* Clay — the brand accent. Warm burnt terracotta that sits comfortably on
     the cream paper. Used for actions, links, focus, and selection. */
  --cw-clay:      #b4541f;
  --cw-clay-deep: #97461a;
  --cw-clay-soft: rgba(180, 84, 31, 0.10);
  --cw-clay-line: rgba(180, 84, 31, 0.28);

  --cw-accent:    var(--cw-clay);
  --cw-link:      var(--cw-clay);
  --cw-warn:      #b45309;
  --cw-warn-bg:   #fffbeb;

  --cw-font-prose:  'Iowan Old Style', 'Palatino Linotype', 'Charter', 'Georgia', ui-serif, serif;
  --cw-font-ui:     -apple-system, BlinkMacSystemFont, 'Inter', ui-sans-serif, system-ui, sans-serif;
  --cw-font-mono:   ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cw-bg);
  color: var(--cw-ink);
  font-family: var(--cw-font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A whisper of paper grain over everything — adds tooth to the flat cream
   without reading as noise. Fixed so it doesn't scroll; never intercepts clicks. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--cw-link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--cw-clay-soft); color: var(--cw-clay-deep); }

button, input, textarea, select { font: inherit; color: inherit; }

/* ──────────────────────────────────────────────────────────────────────
 *  App shell — persistent left sidebar for signed-in users
 * ────────────────────────────────────────────────────────────────────── */

.app-shell {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
  transition: grid-template-columns 180ms ease;
}
.app-shell--plain { display: block; min-height: 100vh; }

/* Collapsed state — sidebar hidden, main pane takes the whole width. */
.app-shell--collapsed { grid-template-columns: 0 1fr; }
.app-shell--collapsed .app-sidebar { display: none; }
.app-shell--collapsed .app-sidebar-show { display: inline-flex; }

/* Pre-paint boot class set by inline script in the layout head. */
html.app-shell-collapsed-boot .app-shell { grid-template-columns: 0 1fr; }
html.app-shell-collapsed-boot .app-sidebar { display: none; }
html.app-shell-collapsed-boot .app-sidebar-show { display: inline-flex; }

.app-main { min-width: 0; }   /* allow children to shrink past content-width default */
.app-main--plain { min-height: 100vh; }

/* Sidebar */
.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 18px 14px;
  border-right: 1px solid var(--cw-line);
  background: var(--cw-bg);
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 0.9rem;
}

.app-sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  gap: 8px;
}
.app-sidebar__brand {
  font-family: var(--cw-font-prose);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--cw-ink);
}
.app-sidebar__brand:hover { color: var(--cw-ink); text-decoration: none; }

.app-sidebar__top-actions { display: flex; align-items: center; gap: 4px; }
.app-sidebar__icon-form { margin: 0; display: inline-flex; }
.app-sidebar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--cw-line);
  background: var(--cw-surface);
  border-radius: 6px;
  cursor: pointer;
  color: var(--cw-ink-soft);
  font-size: 1rem;
  line-height: 1;
}
.app-sidebar__icon-btn:hover { background: var(--cw-line-soft); color: var(--cw-ink); }
.app-sidebar__icon-btn .cw-icon { width: 15px; height: 15px; }

/* Floating "show sidebar" button — visible only when collapsed.
 * Sits at top-left of the viewport, just above the editor content. */
.app-sidebar-show {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 30;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--cw-line);
  background: var(--cw-surface);
  border-radius: 6px;
  cursor: pointer;
  color: var(--cw-ink-soft);
  font-size: 0.95rem;
  line-height: 1;
}
.app-sidebar-show:hover { background: var(--cw-line-soft); color: var(--cw-ink); }

.app-sidebar__section { display: flex; flex-direction: column; gap: 4px; }

.app-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.app-sidebar__item {
  display: block;
  padding: 5px 8px;
  border-radius: 4px;
  color: var(--cw-ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar__item:hover { background: var(--cw-line-soft); color: var(--cw-ink); text-decoration: none; }
.app-sidebar__item--active { background: var(--cw-line); color: var(--cw-ink); }
.app-sidebar__item--active:hover { background: var(--cw-line); }

.app-sidebar__item-title { display: block; }
.app-sidebar__item-title--untitled { color: var(--cw-faint); font-style: italic; }

.app-sidebar__more {
  display: block;
  padding: 4px 8px;
  font-size: 0.78rem;
  color: var(--cw-muted);
  border-radius: 4px;
}
.app-sidebar__more:hover { color: var(--cw-ink); text-decoration: none; background: var(--cw-line-soft); }

.app-sidebar__tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--cw-ink-soft);
}
.app-sidebar__tag:hover { background: var(--cw-line-soft); color: var(--cw-ink); text-decoration: none; }
.app-sidebar__tag-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar__tag-count { color: var(--cw-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.app-sidebar__empty {
  padding: 6px 8px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--cw-faint);
}

.app-sidebar__bottom {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--cw-line);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.app-sidebar__bottom-link {
  display: block;
  padding: 6px 8px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--cw-ink);
  font-size: 0.9rem;
  border-radius: 4px;
  width: 100%;
}
.app-sidebar__bottom-link:hover { background: var(--cw-line-soft); color: var(--cw-ink); text-decoration: none; }
.app-sidebar__signout { color: var(--cw-muted); }

/* Below 720px the sidebar stacks on top (unless explicitly collapsed). */
@media (max-width: 720px) {
  .app-shell:not(.app-shell--collapsed) {
    grid-template-columns: 1fr;
  }
  .app-shell:not(.app-shell--collapsed) .app-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--cw-line);
  }
}

/* ──────────────────────────────────────────────────────────────────────
 *  Generic page container
 * ────────────────────────────────────────────────────────────────────── */

.cw-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
.cw-page--wide { max-width: 56rem; }
.cw-page--narrow { max-width: 32rem; }

.cw-page__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.cw-page__title {
  font-family: var(--cw-font-prose);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.cw-page__subtle { color: var(--cw-muted); font-size: 0.9rem; }

/* ──────────────────────────────────────────────────────────────────────
 *  Buttons
 * ────────────────────────────────────────────────────────────────────── */

.cw-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cw-btn--primary {
  background: var(--cw-clay);
  color: #fff;
}
.cw-btn--primary:hover { background: var(--cw-clay-deep); text-decoration: none; }
.cw-btn--ghost {
  background: transparent;
  color: var(--cw-ink-soft);
  border-color: var(--cw-line);
}
.cw-btn--ghost:hover { background: var(--cw-line-soft); color: var(--cw-ink); text-decoration: none; }
.cw-btn--danger {
  background: transparent;
  color: #b91c1c;
  border: none;
  padding: 4px 8px;
  font-size: 0.85rem;
}
.cw-btn--danger:hover { text-decoration: underline; }

.cw-icon-btn-form { margin: 0; display: inline-flex; }
.cw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  background: var(--cw-surface);
  color: var(--cw-ink-soft);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.cw-icon-btn:hover {
  background: var(--cw-line-soft);
  color: var(--cw-ink);
  text-decoration: none;
}
.cw-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cw-clay-soft);
  border-color: var(--cw-clay);
}
.cw-icon-btn--primary {
  background: var(--cw-clay);
  border-color: var(--cw-clay);
  color: #fff;
}
.cw-icon-btn--primary:hover {
  background: var(--cw-clay-deep);
  border-color: var(--cw-clay-deep);
  color: #fff;
}
.cw-icon-btn--danger {
  color: #b91c1c;
  border-color: transparent;
  background: transparent;
}
.cw-icon-btn--danger:hover {
  background: #fef2f2;
  border-color: #fee2e2;
  color: #991b1b;
}
.cw-icon-btn .cw-icon { width: 17px; height: 17px; }

/* ──────────────────────────────────────────────────────────────────────
 *  Flash
 * ────────────────────────────────────────────────────────────────────── */

.cw-flash {
  border-radius: 8px;
  padding: 9px 13px;
  margin-bottom: 20px;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-left-width: 3px;
  color: var(--cw-ink-soft);
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04);
}
.cw-flash--notice { border-left-color: #3a6b52; }
.cw-flash--alert  { border-left-color: #b4503a; }

/* ──────────────────────────────────────────────────────────────────────
 *  Signed-out landing page
 * ────────────────────────────────────────────────────────────────────── */

.cw-landing {
  min-height: 100vh;
  color: var(--cw-ink);
}

.cw-landing__nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 72rem;
  margin: 0 auto;
  padding: 20px 24px;
  gap: 18px;
}

.cw-landing__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cw-ink);
  font-family: var(--cw-font-prose);
  font-size: 1.12rem;
  font-weight: 700;
}
.cw-landing__brand:hover { color: var(--cw-ink); text-decoration: none; }

.cw-landing__brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--cw-clay);
  box-shadow: 0 1px 0 var(--cw-clay-deep);
}

/* Centre nav links — hidden on small screens to keep the bar uncluttered. */
.cw-landing__nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-right: auto;
  margin-left: 28px;
  font-size: 0.92rem;
}
.cw-landing__nav-links a { color: var(--cw-ink-soft); }
.cw-landing__nav-links a:hover { color: var(--cw-ink); text-decoration: none; }

.cw-landing__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Hero ── two-column: copy on the left, a live-looking artifact on the right. */
.cw-landing__hero {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 88px);
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) 24px clamp(64px, 9vw, 112px);
}

.cw-landing__hero-copy { min-width: 0; }

.cw-landing__eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 4px 11px;
  border: 1px solid var(--cw-clay-line);
  border-radius: 999px;
  background: var(--cw-clay-soft);
  color: var(--cw-clay-deep);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cw-landing__headline {
  margin: 0;
  color: var(--cw-ink);
  font-family: var(--cw-font-prose);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-weight: 700;
  text-wrap: balance;
}

.cw-landing__lede {
  max-width: 36rem;
  margin: 22px 0 0;
  color: var(--cw-ink-soft);
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.55;
}

.cw-landing__lede code,
.cw-landing__feature code {
  color: var(--cw-clay-deep);
  font-family: var(--cw-font-mono);
  font-size: 0.9em;
}

.cw-landing__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.cw-landing__primary { padding-inline: 18px; }

/* "Works with" row — quiet credibility, not logos we don't have. */
.cw-landing__trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--cw-line);
}
.cw-landing__trust-label {
  color: var(--cw-faint);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cw-landing__trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cw-ink-soft);
  font-size: 0.88rem;
  font-weight: 500;
}

/* ── Hero artifact — a faux task card that tells the collaboration story. */
.cw-landing__artifact {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(31, 41, 55, 0.12);
  border-radius: 12px;
  background: var(--cw-surface);
  box-shadow: 0 28px 70px -40px rgba(31, 41, 55, 0.40);
}

.cw-landing__artifact-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--cw-line);
  background: var(--cw-bg);
  color: var(--cw-muted);
  font-family: var(--cw-font-mono);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-landing__artifact-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
}

.cw-landing__artifact-body { padding: 22px 22px 24px; }

.cw-landing__task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cw-landing__status {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--cw-clay-soft);
  color: var(--cw-clay-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cw-landing__artifact-kicker {
  margin: 0;
  color: var(--cw-muted);
  font-family: var(--cw-font-mono);
  font-size: 0.76rem;
}

.cw-landing__artifact h2 {
  margin: 0 0 16px;
  font-family: var(--cw-font-prose);
  font-size: 1.4rem;
  line-height: 1.22;
}

.cw-landing__thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.cw-landing__msg {
  padding: 9px 12px;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  background: var(--cw-bg);
}
.cw-landing__msg--agent {
  border-color: var(--cw-clay-line);
  background: var(--cw-clay-soft);
}
.cw-landing__msg-who {
  display: block;
  margin-bottom: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cw-muted);
}
.cw-landing__msg--agent .cw-landing__msg-who { color: var(--cw-clay-deep); }
.cw-landing__msg p { margin: 0; color: var(--cw-ink-soft); font-size: 0.92rem; line-height: 1.45; }

.cw-landing__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cw-landing__doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  background: var(--cw-surface);
  color: var(--cw-ink);
  font-family: var(--cw-font-mono);
  font-size: 0.82rem;
}
.cw-landing__doc-icon { font-size: 0.95rem; }

/* ── Problem ── the status quo, before the solution. */
.cw-landing__problem {
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 88px) 24px;
  border-top: 1px solid var(--cw-line);
}
.cw-landing__problem-head { max-width: 38rem; margin-bottom: 44px; }
.cw-landing__problem-lede {
  margin: 14px 0 0;
  color: var(--cw-ink-soft);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.55;
}
.cw-landing__problems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cw-landing__problem-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}
.cw-landing__problem-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border: 1px solid var(--cw-line);
  border-radius: 7px;
  background: var(--cw-line-soft);
  color: var(--cw-muted);
  font-size: 0.78rem;
  line-height: 1;
}
.cw-landing__problem-item h3 {
  margin: 0 0 5px;
  font-family: var(--cw-font-prose);
  font-size: 1.12rem;
  font-weight: 700;
}
.cw-landing__problem-item p { margin: 0; color: var(--cw-ink-soft); }

/* ── How it works ── */
.cw-landing__how {
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 88px) 24px;
  border-top: 1px solid var(--cw-line);
}
.cw-landing__section-eyebrow {
  margin: 0 0 8px;
  color: var(--cw-clay-deep);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cw-landing__section-title {
  margin: 0 0 44px;
  max-width: 32rem;
  font-family: var(--cw-font-prose);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.cw-landing__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.cw-landing__step { min-width: 0; }
.cw-landing__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 9px;
  background: var(--cw-ink);
  color: #fff;
  font-family: var(--cw-font-mono);
  font-size: 0.92rem;
  font-weight: 600;
}
.cw-landing__step h3 {
  margin: 0 0 8px;
  font-family: var(--cw-font-prose);
  font-size: 1.2rem;
  font-weight: 700;
}
.cw-landing__step p { margin: 0; color: var(--cw-ink-soft); }

/* ── Features grid ── 1px gaps over a line-coloured backdrop draw the cell
   dividers; each cell paints the page background back on top. */
.cw-landing__features {
  width: min(100%, calc(72rem - 48px));
  margin: 0 auto clamp(56px, 8vw, 88px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--cw-line);
  border: 1px solid var(--cw-line);
  border-radius: 12px;
  overflow: hidden;
}
.cw-landing__feature {
  min-width: 0;
  padding: 32px;
  background: var(--cw-bg);
}
.cw-landing__pillar-label {
  display: block;
  margin-bottom: 12px;
  color: var(--cw-clay-deep);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cw-landing__feature h2 {
  margin: 0 0 10px;
  font-family: var(--cw-font-prose);
  font-size: 1.35rem;
  line-height: 1.22;
}
.cw-landing__feature p { margin: 0; color: var(--cw-ink-soft); }

/* ── Closing CTA ── */
.cw-landing__closing {
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 72px) 24px clamp(72px, 10vw, 104px);
  border-top: 1px solid var(--cw-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cw-landing__closing-inner { max-width: 44rem; }
.cw-landing__closing h2 {
  margin: 0 0 10px;
  font-family: var(--cw-font-prose);
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.cw-landing__closing p { margin: 0; color: var(--cw-ink-soft); }
.cw-landing__closing .cw-landing__primary { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 880px) {
  .cw-landing__nav-links { display: none; }

  .cw-landing__hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 56px;
  }
  .cw-landing__artifact { max-width: 32rem; }

  .cw-landing__problems { grid-template-columns: 1fr; gap: 24px; }
  .cw-landing__steps { grid-template-columns: 1fr; gap: 24px; }
  .cw-landing__features { grid-template-columns: 1fr; }

  .cw-landing__closing {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }
}

@media (max-width: 560px) {
  .cw-landing__nav {
    align-items: flex-start;
    flex-direction: column;
  }
  .cw-landing__actions { width: 100%; }
  .cw-landing__actions .cw-btn { justify-content: center; flex: 1; }

  .cw-landing__hero { padding-top: 24px; }
  .cw-landing__cta .cw-btn { justify-content: center; width: 100%; }
  .cw-landing__artifact-body { padding: 18px; }
  .cw-landing__feature { padding: 24px; }
}

/* ──────────────────────────────────────────────────────────────────────
 *  Auth pages
 * ────────────────────────────────────────────────────────────────────── */

/* Full-height, centred. A faint clay wash bleeds in from the corners so the
   page reads as a crafted threshold rather than a form floating in a void. */
.cw-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background:
    radial-gradient(60rem 40rem at 12% -10%, var(--cw-clay-soft), transparent 60%),
    radial-gradient(50rem 40rem at 110% 110%, var(--cw-clay-soft), transparent 55%);
}
.cw-auth__inner { width: 100%; max-width: 22rem; }

.cw-auth__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--cw-font-prose);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cw-ink);
  margin: 0 0 28px 2px;
}
.cw-auth__brand:hover { color: var(--cw-ink); text-decoration: none; }
.cw-auth__brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--cw-clay);
  box-shadow: 0 1px 0 var(--cw-clay-deep);
}

.cw-auth__card {
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-radius: 14px;
  padding: 28px 26px 24px;
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04), 0 12px 32px -16px rgba(31, 41, 55, 0.12);
}
.cw-auth__title {
  font-family: var(--cw-font-prose);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 20px;
}
.cw-auth__field {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  margin-bottom: 12px;
  background: var(--cw-surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.cw-auth__field::placeholder { color: var(--cw-faint); }
.cw-auth__field:focus {
  outline: none;
  border-color: var(--cw-clay);
  box-shadow: 0 0 0 3px var(--cw-clay-soft);
}
.cw-auth__submit { width: 100%; justify-content: center; padding: 11px 14px; margin-top: 4px; }
.cw-auth__links {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--cw-muted);
  display: flex;
  gap: 18px;
  justify-content: center;
}

/* ──────────────────────────────────────────────────────────────────────
 *  Document list
 * ────────────────────────────────────────────────────────────────────── */

.cw-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 0.88rem;
}
.cw-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--cw-line);
  background: var(--cw-surface);
  color: var(--cw-ink-soft);
}
.cw-chip:hover { border-color: var(--cw-muted); color: var(--cw-ink); text-decoration: none; }
.cw-chip--active {
  background: var(--cw-ink);
  border-color: var(--cw-ink);
  color: #fff;
}
.cw-chip--active:hover { color: #fff; }
.cw-chip--tag {
  background: var(--cw-line-soft);
  border-color: var(--cw-line);
  color: var(--cw-ink-soft);
  font-size: 0.78rem;
  padding: 2px 8px;
}

.cw-view-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  background: var(--cw-surface);
}
.cw-view-toggle__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border-radius: 6px;
  color: var(--cw-muted);
}
.cw-view-toggle__item:hover {
  background: var(--cw-line-soft);
  color: var(--cw-ink);
  text-decoration: none;
}
.cw-view-toggle__item--active {
  background: var(--cw-ink);
  color: #fff;
}
.cw-view-toggle__item--active:hover { color: #fff; background: var(--cw-ink); }
.cw-view-toggle .cw-icon { width: 16px; height: 16px; }

.cw-doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--cw-line);
}
.cw-doc-list__item {
  border-bottom: 1px solid var(--cw-line);
}
.cw-doc-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 16px;
  margin: 4px -16px;     /* extend hover past content edge horizontally; breathing room above/below so hover doesn't touch the divider */
  border-radius: 6px;
  color: inherit;
  transition: background 120ms ease;
}
.cw-doc-list__row:hover {
  background: var(--cw-line-soft);
  text-decoration: none;
}
.cw-doc-list__title {
  font-family: var(--cw-font-prose);
  font-size: 1.05rem;
  color: var(--cw-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.cw-doc-list__title--untitled { color: var(--cw-faint); font-style: italic; }
.cw-doc-list__date { color: var(--cw-muted); font-size: 0.85rem; flex-shrink: 0; }
.cw-empty { color: var(--cw-muted); padding: 40px 0; }

.cw-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 14px;
}
.cw-doc-card {
  display: flex;
  flex-direction: column;
  min-height: 13rem;
  padding: 18px;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  background: var(--cw-surface);
  color: inherit;
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.cw-doc-card:hover {
  border-color: #d6d3cb;
  box-shadow: 0 8px 24px -18px rgba(31, 41, 55, 0.35);
  text-decoration: none;
  transform: translateY(-1px);
}
.cw-doc-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.2rem;
  color: var(--cw-ink);
  font-family: var(--cw-font-prose);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.32;
}
.cw-doc-card__title--untitled { color: var(--cw-faint); font-style: italic; }
.cw-doc-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 12px;
  color: var(--cw-ink-soft);
  font-size: 0.92rem;
  line-height: 1.48;
}
.cw-doc-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--cw-muted);
  font-size: 0.82rem;
}
.cw-doc-card__tags {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.cw-doc-card-wrap {
  position: relative;
}
.cw-doc-card-wrap .cw-doc-card {
  height: 100%;
}
.cw-card-action {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
}
.cw-card-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cw-faint);
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 1px 3px rgba(31, 41, 55, 0.08);
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.cw-doc-card-wrap:hover .cw-card-remove,
.cw-card-remove:focus-visible {
  opacity: 1;
}
.cw-card-remove:hover {
  background: #fee2e2;
  color: #b91c1c;
}
.cw-card-remove .cw-icon { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .cw-view-toggle { margin-left: 0; }
  .cw-doc-grid { grid-template-columns: 1fr; }
  .cw-card-remove { opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────────────
 *  Editor page
 * ────────────────────────────────────────────────────────────────────── */

.cw-editor {
  max-width: 44rem;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.cw-editor__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 0.85rem;
  color: var(--cw-muted);
}
.cw-editor__bar-spacer { flex: 1; } /* keeps right cluster anchored even when left is empty */
.cw-editor__bar-right { display: flex; align-items: center; gap: 10px; }

/* Tiny coloured status dot. Title attribute carries the full "Saved at HH:MM" hover. */
.cw-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;          /* saved */
  flex-shrink: 0;
  transition: background 180ms ease;
  display: inline-block;
}
.cw-status-dot[data-state="saving"] {
  background: #f59e0b;          /* amber */
  animation: cw-pulse 1.2s ease-in-out infinite;
}
.cw-status-dot[data-state="error"] {
  background: #ef4444;          /* red */
}
@keyframes cw-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

/* Subtle footer beneath the editor — word count, anchored bottom-right. */
.cw-editor__footer {
  margin-top: 28px;
  text-align: right;
  font-size: 0.78rem;
  color: var(--cw-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Quiet actions menu — native <details> for no-JS popover. */
.cw-menu { position: relative; }
.cw-menu__trigger {
  list-style: none;
  cursor: pointer;
  user-select: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--cw-muted);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}
.cw-menu__trigger::-webkit-details-marker { display: none; }
.cw-menu__trigger::marker { content: ""; }
.cw-menu__trigger:hover { background: var(--cw-line-soft); color: var(--cw-ink); }
.cw-menu[open] .cw-menu__trigger { background: var(--cw-line-soft); color: var(--cw-ink); }
.cw-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 240px;
  max-width: 320px;
  padding: 4px;
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.12);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Read-only info row inside the menu (e.g. public share URL). */
.cw-menu__readout {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cw-line);
  margin-bottom: 4px;
}
.cw-menu__readout-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: #047857;
  margin-bottom: 4px;
}
.cw-menu__readout-value {
  display: block;
  font-family: var(--cw-font-mono);
  font-size: 0.8rem;
  color: var(--cw-ink-soft);
  word-break: break-all;
  line-height: 1.4;
}
.cw-menu__readout-value:hover { color: var(--cw-link); text-decoration: none; }
.cw-menu__readout-arrow { opacity: 0.5; font-size: 0.75rem; margin-left: 4px; }
.cw-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--cw-ink-soft);
}
.cw-menu__item:hover { background: var(--cw-line-soft); color: var(--cw-ink); }
.cw-menu__item--danger { color: #b91c1c; }
.cw-menu__item--danger:hover { background: #fef2f2; color: #991b1b; }
.cw-menu__item .cw-icon { width: 15px; height: 15px; }


.cw-editor__title {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--cw-font-prose);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  outline: none;
  margin-bottom: 6px;
  color: var(--cw-ink);
}
.cw-editor__title::placeholder { color: var(--cw-faint); font-weight: 600; }

/* Editor footer (metadata that's not the writing itself). */
.cw-editor__meta {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--cw-line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  cursor: text;
}
.cw-chips__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--cw-faint);
  margin-right: 4px;
  user-select: none;
}
.cw-chips__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.cw-chips__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 9px;
  border-radius: 999px;
  background: var(--cw-line-soft);
  color: var(--cw-ink-soft);
  font-size: 0.8rem;
  line-height: 1.4;
}
.cw-chips__chip-label { font-family: var(--cw-font-mono); }
.cw-chips__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  color: var(--cw-muted);
  font-size: 1rem;
  line-height: 1;
}
.cw-chips__chip-remove:hover { background: rgba(0,0,0,0.06); color: var(--cw-ink); }
.cw-chips__input {
  flex: 1;
  min-width: 120px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.85rem;
  color: var(--cw-ink);
  padding: 2px 4px;
}
.cw-chips__input::placeholder { color: var(--cw-faint); }

.cw-editor__host {
  border: none;
  padding: 0;
  min-height: 28rem;
}
.cw-editor__host .cm-editor { outline: none; }
.cw-editor__host textarea {
  width: 100%;
  border: 1px solid var(--cw-line);
  border-radius: 6px;
  padding: 16px;
  background: var(--cw-surface);
  font-family: var(--cw-font-mono);
  font-size: 0.95rem;
  outline: none;
  resize: vertical;
  min-height: 28rem;
}

/* ──────────────────────────────────────────────────────────────────────
 *  Rendered markdown preview (used in edit toggle + /d/:token share page)
 * ────────────────────────────────────────────────────────────────────── */

.preview-host {
  color: var(--cw-ink);
  font-family: var(--cw-font-prose);
  font-size: 1.075rem;
  line-height: 1.7;
}
.preview-host > :first-child { margin-top: 0; }
.preview-host h1 { font-size: 1.9em; font-weight: 700; margin: 1.5rem 0 0.75rem; line-height: 1.2; letter-spacing: -0.01em; }
.preview-host h2 { font-size: 1.45em; font-weight: 700; margin: 1.5rem 0 0.5rem; line-height: 1.3; }
.preview-host h3 { font-size: 1.2em;  font-weight: 700; margin: 1.25rem 0 0.5rem; }
.preview-host p  { margin: 0.85rem 0; }
.preview-host ul, .preview-host ol { margin: 0.85rem 0 0.85rem 1.5rem; }
.preview-host li { margin: 0.3rem 0; }

/* GFM task-list items — \`- [ ]\` and \`- [x]\`.
 * commonmarker emits a disabled <input type="checkbox"> inside the <li>.
 * Drop the bullet, indent so the checkbox sits where the bullet would be,
 * and restyle the checkbox itself to feel deliberate. */
.preview-host li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.25rem;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.preview-host input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--cw-muted);
  border-radius: 3px;
  background: var(--cw-surface);
  position: relative;
  top: 2px;          /* nudge to sit on the text baseline */
  flex-shrink: 0;
  cursor: default;   /* preview is read-only */
  opacity: 1;        /* override browser-disabled fade */
}
.preview-host input[type="checkbox"]:checked {
  background: var(--cw-ink);
  border-color: var(--cw-ink);
}
.preview-host input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.preview-host li:has(> input[type="checkbox"]:checked) {
  color: var(--cw-muted);
  text-decoration: line-through;
  text-decoration-color: var(--cw-faint);
}
.preview-host a  { color: var(--cw-link); text-decoration: underline; text-underline-offset: 2px; }
.preview-host strong { font-weight: 700; }
.preview-host em { font-style: italic; }
.preview-host code {
  font-family: var(--cw-font-mono);
  background: var(--cw-line-soft);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.92em;
}
.preview-host pre {
  background: var(--cw-line-soft);
  padding: 1rem 1.1rem;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.9rem;
  margin: 1rem 0;
}
.preview-host pre code { background: transparent; padding: 0; font-size: inherit; }
.preview-host blockquote {
  border-left: 3px solid var(--cw-line);
  padding: 0.2rem 0 0.2rem 1rem;
  color: var(--cw-ink-soft);
  font-style: italic;
  margin: 1rem 0;
}
.preview-host hr { border: none; border-top: 1px solid var(--cw-line); margin: 2rem 0; }
.preview-host table { border-collapse: collapse; margin: 1rem 0; font-size: 0.95em; }
.preview-host th, .preview-host td { border: 1px solid var(--cw-line); padding: 0.5rem 0.75rem; }
.preview-host th { background: var(--cw-line-soft); font-weight: 600; text-align: left; }

/* ──────────────────────────────────────────────────────────────────────
 *  Tags page
 * ────────────────────────────────────────────────────────────────────── */

.cw-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cw-tag-cloud__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--cw-line);
  border-radius: 999px;
  color: var(--cw-ink-soft);
  background: var(--cw-surface);
  font-size: 0.9rem;
}
.cw-tag-cloud__item:hover { border-color: var(--cw-muted); color: var(--cw-ink); text-decoration: none; }
.cw-tag-cloud__count { color: var(--cw-faint); font-size: 0.78rem; }

/* ──────────────────────────────────────────────────────────────────────
 *  API tokens settings
 * ────────────────────────────────────────────────────────────────────── */

.cw-token-banner {
  border: 1px solid #fbbf24;
  background: var(--cw-warn-bg);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 24px;
  font-size: 0.9rem;
  color: #78350f;
}
.cw-token-banner__code {
  display: block;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 8px 12px;
  margin-top: 8px;
  font-family: var(--cw-font-mono);
  font-size: 0.88rem;
  word-break: break-all;
}

.cw-token-form {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.cw-token-form__input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--cw-line);
  border-radius: 6px;
  background: var(--cw-surface);
}
.cw-token-form__input:focus { outline: 2px solid var(--cw-ink); outline-offset: -1px; border-color: var(--cw-ink); }

.cw-token-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--cw-line);
  border-radius: 6px;
  background: var(--cw-surface);
}
.cw-token-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cw-line);
}
.cw-token-list__item:last-child { border-bottom: none; }
.cw-token-list__name { font-weight: 500; }
.cw-token-list__meta { color: var(--cw-muted); font-size: 0.82rem; margin-top: 2px; }

.cw-curl {
  margin-top: 32px;
  padding: 16px;
  background: var(--cw-line-soft);
  border-radius: 6px;
  font-size: 0.85rem;
}
.cw-curl__label { font-weight: 500; margin-bottom: 6px; color: var(--cw-ink); }
.cw-curl pre {
  margin: 0;
  font-family: var(--cw-font-mono);
  font-size: 0.82rem;
  color: var(--cw-ink-soft);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ──────────────────────────────────────────────────────────────────────
 *  Icons
 * ────────────────────────────────────────────────────────────────────── */

.cw-icon {
  display: inline-block; /* override Tailwind Preflight's svg { display: block } */
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.13em;
}

/* ──────────────────────────────────────────────────────────────────────
 *  Sidebar — primary nav tabs (Documents / Collections)
 * ────────────────────────────────────────────────────────────────────── */

.app-sidebar__tab {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--cw-ink);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.app-sidebar__tab:hover { background: var(--cw-line-soft); color: var(--cw-ink); text-decoration: none; }
.app-sidebar__tab-icon { font-size: 1.05rem; color: var(--cw-muted); }
.app-sidebar__tab-label { flex: 1; }
.app-sidebar__tab-count {
  font-size: 0.72rem;
  color: var(--cw-muted);
  font-variant-numeric: tabular-nums;
  background: var(--cw-line-soft);
  padding: 1px 7px;
  border-radius: 10px;
}
/* Active resource — filled, dark, with a coloured icon. Clearly distinct. */
.app-sidebar__tab--active {
  background: var(--cw-ink);
  color: #fff;
  font-weight: 600;
}
.app-sidebar__tab--active:hover { background: var(--cw-ink); color: #fff; }
.app-sidebar__tab--active .app-sidebar__tab-icon { color: #fff; }
.app-sidebar__tab--active .app-sidebar__tab-count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Item list sits indented beneath its tab. */
.app-sidebar__section .app-sidebar__list { padding-left: 6px; margin-top: 2px; }

.app-sidebar__section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--cw-muted);
  padding: 0 9px 4px;
}
.app-sidebar__section-label-icon { font-size: 0.85rem; }

/* ──────────────────────────────────────────────────────────────────────
 *  Forms — inputs, inline form rows, reveal cards
 * ────────────────────────────────────────────────────────────────────── */

.cw-input {
  padding: 9px 12px;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: var(--cw-font-ui);
  color: var(--cw-ink);
  background: var(--cw-surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.cw-input::placeholder { color: var(--cw-faint); }
.cw-input:focus {
  outline: none;
  border-color: var(--cw-accent);
  box-shadow: 0 0 0 3px var(--cw-clay-soft);
}
.cw-input--title {
  font-family: var(--cw-font-prose);
  font-size: 1.5rem;
  font-weight: 700;
  padding: 6px 12px;
}

/* A bordered card holding a revealed inline form (create / rename). */
.cw-form-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  margin-bottom: 24px;
  border: 1px solid var(--cw-line);
  border-radius: 10px;
  background: var(--cw-surface);
}
.cw-form-card .cw-input { flex: 1; }

.cw-btn--sm { padding: 5px 11px; font-size: 0.84rem; }

/* ──────────────────────────────────────────────────────────────────────
 *  Collection — show page
 * ────────────────────────────────────────────────────────────────────── */

.cw-page__header--detail { align-items: center; }
.cw-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--cw-muted);
  font-size: 0.9rem;
  font-weight: 500;
}
.cw-back-link:hover { color: var(--cw-ink); text-decoration: none; }

.cw-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
}
.cw-detail-title__icon { font-size: 1.5rem; color: var(--cw-faint); }
.cw-detail-title__text {
  font-family: var(--cw-font-prose);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.cw-detail-meta { color: var(--cw-muted); font-size: 0.88rem; margin: 0 0 8px; }

.cw-section { margin-top: 32px; }
.cw-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.cw-section__title {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cw-faint);
  font-weight: 600;
  margin: 0;
}

/* Leading icon inside a list-row title. */
.cw-doc-list__icon { color: var(--cw-faint); margin-right: 8px; }

/* Row with a trailing action that appears on hover (e.g. Remove). */
.cw-doc-list__item--with-action {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cw-doc-list__item--with-action .cw-doc-list__row { flex: 1; min-width: 0; }
.cw-row-action { display: flex; align-items: center; margin: 0; }
.cw-row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--cw-faint);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.cw-doc-list__item--with-action:hover .cw-row-remove { opacity: 1; }
.cw-row-remove:hover { background: #fee2e2; color: #b91c1c; }
.cw-row-remove .cw-icon { width: 16px; height: 16px; }

/* ──────────────────────────────────────────────────────────────────────
 *  Search picker (combobox) — type to filter, click/Enter to link
 * ────────────────────────────────────────────────────────────────────── */

.picker { position: relative; max-width: 30rem; margin-bottom: 12px; }
.picker__field {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--cw-line);
  border-radius: 9px;
  background: var(--cw-surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.picker__field:focus-within {
  border-color: var(--cw-clay);
  box-shadow: 0 0 0 3px var(--cw-clay-soft);
}
.picker__icon { color: var(--cw-faint); font-size: 1rem; flex-shrink: 0; }
.picker__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 9px 0;
  font-size: 0.95rem;
  color: var(--cw-ink);
}
.picker__input::placeholder { color: var(--cw-faint); }

.picker__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-radius: 11px;
  box-shadow: 0 14px 36px -14px rgba(31, 41, 55, 0.24);
  max-height: 18rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.picker__list { list-style: none; margin: 0; padding: 5px; }
.picker__option form, .picker__option .button_to { margin: 0; }
.picker__option-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  color: var(--cw-ink);
  font-size: 0.92rem;
}
.picker__option-btn:hover,
.picker__option--active .picker__option-btn { background: var(--cw-clay-soft); }
.picker__option-icon { color: var(--cw-faint); flex-shrink: 0; }
.picker__option-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__option-title--untitled { color: var(--cw-faint); font-style: italic; }
.picker__option-add { color: var(--cw-clay); font-size: 0.95rem; opacity: 0; transition: opacity 0.1s ease; }
.picker__option-btn:hover .picker__option-add,
.picker__option--active .picker__option-add { opacity: 1; }
.picker__empty { padding: 14px; margin: 0; color: var(--cw-muted); font-size: 0.9rem; text-align: center; }

/* ──────────────────────────────────────────────────────────────────────
 *  Task board
 * ────────────────────────────────────────────────────────────────────── */

/* Fill the viewport so the board's horizontal scrollbar sits pinned at the
   bottom of the screen (Trello-style), instead of mid-page under the cards. */
.cw-page--board {
  max-width: none;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 56px 24px 16px;
  overflow: hidden;
}

.board {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 16px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  /* Trello-style scroll: the bar stays out of the way and only fades in,
     thin and subtle, while the pointer is over the board. */
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: transparent transparent;
}
.board:hover { scrollbar-color: var(--cw-line) transparent; }
.board::-webkit-scrollbar { height: 8px; }
.board::-webkit-scrollbar-track { background: transparent; }
.board::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}
.board:hover::-webkit-scrollbar-thumb { background: var(--cw-line); }
.board::-webkit-scrollbar-thumb:hover { background: var(--cw-faint); }
.board__col {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.board__col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}
.board__col-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cw-ink-soft);
}
/* A small status dot — the only colour the board carries. */
.board__col-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cw-faint);
}
.board__col-title--todo::before   { background: var(--cw-faint); }
.board__col-title--doing::before  { background: var(--cw-clay); }
.board__col-title--review::before { background: var(--cw-warn); }
.board__col-title--done::before   { background: #3a6b52; }
.board__col-count {
  font-size: 0.72rem;
  color: var(--cw-muted);
  font-variant-numeric: tabular-nums;
}

.board__list {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 10px;
  background: var(--cw-line-soft);
  /* Fill the column and scroll internally when a column is taller than the
     viewport, so the board's own scrollbar stays horizontal-only. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.board__list:hover { scrollbar-color: var(--cw-line) transparent; }
.board__list::-webkit-scrollbar { width: 8px; }
.board__list::-webkit-scrollbar-track { background: transparent; }
.board__list::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.board__list:hover::-webkit-scrollbar-thumb { background: var(--cw-line); }

.board__card {
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04);
  cursor: grab;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
.board__card:hover { border-color: #d6d3cb; box-shadow: 0 2px 8px -2px rgba(31, 41, 55, 0.12); }
.board__card:active { cursor: grabbing; }
.board__card-link { display: block; padding: 11px 13px; color: var(--cw-ink); }
.board__card-link:hover { text-decoration: none; }
.board__card-title {
  display: block;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--cw-ink);
}
.board__card-meta {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--cw-muted);
  font-variant-numeric: tabular-nums;
}
.board__card-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* SortableJS drag states. */
.board__card--ghost { opacity: 0.4; }
.board__card--chosen { box-shadow: 0 8px 24px -8px rgba(31, 41, 55, 0.28); }
/* The fallback mirror is repositioned via inline transform on every pointer
   move — any transform transition makes it lag behind the cursor. */
.board__card--drag { transition: none; }

.board__add { padding: 0 4px; }
.board__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  background: transparent;
  border-radius: 7px;
  color: var(--cw-muted);
  font-size: 0.86rem;
  cursor: pointer;
  text-align: left;
}
.board__add-btn:hover { background: var(--cw-line-soft); color: var(--cw-ink); }
.board__add-form { display: flex; flex-direction: column; gap: 8px; }
.board__add-input { width: 100%; }
.board__add-actions { display: flex; gap: 8px; }

/* ──────────────────────────────────────────────────────────────────────
 *  Task detail
 * ────────────────────────────────────────────────────────────────────── */

.task-edit { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.task-edit__title { width: 100%; }
.task-edit__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Read-only status indicator. Status is changed by dragging the card on the
   board, so the detail view just shows where the task currently sits. */
.task-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--cw-line-soft);
  border: 1px solid var(--cw-line);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cw-ink-soft);
}
.task-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cw-faint); }
.task-status--doing  .task-status__dot { background: var(--cw-clay); }
.task-status--review .task-status__dot { background: var(--cw-warn); }
.task-status--done   .task-status__dot { background: #3a6b52; }
.task-edit__description {
  width: 100%;
  font-family: var(--cw-font-ui);
  line-height: 1.6;
  resize: vertical;
}

/* ──────────────────────────────────────────────────────────────────────
 *  Modal dialog (native <dialog>)
 * ────────────────────────────────────────────────────────────────────── */

.cw-modal {
  /* Center in the viewport explicitly, rather than relying on the UA's
     auto-centering for :modal dialogs (which our author styles were overriding). */
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  padding: 0;
  background: transparent;
  width: calc(100% - 32px);
  max-width: 30rem;
  height: fit-content;
  color: var(--cw-ink);
}
.cw-modal::backdrop {
  background: rgba(31, 41, 55, 0.32);
  backdrop-filter: blur(2px);
}
.cw-modal[open] { animation: cw-modal-in 0.14s ease; }
@keyframes cw-modal-in {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.cw-modal__panel {
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-radius: 12px;
  box-shadow: 0 24px 60px -24px rgba(31, 41, 55, 0.45);
  overflow: hidden;
}
.cw-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--cw-line-soft);
}
.cw-modal__title {
  margin: 0;
  font-family: var(--cw-font-prose);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cw-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--cw-muted);
  cursor: pointer;
}
.cw-modal__close:hover { background: var(--cw-line-soft); color: var(--cw-ink); }
.cw-modal__body { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.cw-modal__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }

.cw-field { display: flex; flex-direction: column; gap: 6px; }
.cw-field__label { font-size: 0.82rem; font-weight: 600; color: var(--cw-ink-soft); }

.comment-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comment {
  border: 1px solid var(--cw-line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--cw-surface);
}
.comment--agent { border-left: 3px solid var(--cw-clay); background: var(--cw-clay-soft); }
.comment__head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.comment__author { font-weight: 600; font-size: 0.9rem; color: var(--cw-ink); }
.comment__badge {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #fff;
  background: var(--cw-clay);
  padding: 1px 7px;
  border-radius: 10px;
}
.comment__time { margin-left: auto; font-size: 0.78rem; color: var(--cw-faint); font-variant-numeric: tabular-nums; }
.comment__body { font-size: 0.92rem; color: var(--cw-ink-soft); line-height: 1.55; }
.comment__body p { margin: 0 0 6px; }
.comment__body p:last-child { margin-bottom: 0; }

.comment-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.comment-form__input { width: 100%; font-family: var(--cw-font-ui); line-height: 1.55; resize: vertical; }

/* ──────────────────────────────────────────────────────────────────────
 *  Helpers
 * ────────────────────────────────────────────────────────────────────── */

.cw-hidden { display: none !important; }