/* ---------- Projects (the Slate) ----------
   Migrated onto the Coverage Ledger kit (css/10-kit.css) and the ONE shared card
   (.cl-card / .cl-card[data-empty] / .cl-menu, built by kit-card.js). The Slate
   reads top-to-bottom as one ordered column: the title block -> a LIGHT current-
   state line (NOT a black-box hero) -> the card grid (project cards + granted
   entitlement empty cards + the add card). Every project IS a kit card — the card
   is the button (body opens the project), the per-card actions live in a top-right
   menu — so the bespoke slate-focus ink hero, the two-button project tile, the
   framed empty-state, the slate-item-* foot vocabulary, and the now-dead
   treatment-plan ink hero (+ its dark-ground readability scoping) are all GONE.
   What remains is ONLY what the kit can't know: the page container, the signed-out
   toggles, the account-notice tone map, the per-project treatment-tone accent
   COLOR (the kit's --cl-accent left rule), the current-state line, and the
   responsive grid collapse. */

.projects-view,
.account-view {
  margin: 0 auto;
  max-width: 1120px;
  min-height: 100vh;
  padding: 0 24px 80px;
}

/* Copy blocks that should sit to a reading measure share the one 62ch cap. */
.projects-lede { max-width: 62ch; }

body[data-signed-out="true"] .projects-lede { display: none; }

/* The account-notice is a kit cl-notice, but setAccountNotice() drives a richer
   tone vocabulary (success/warning/error/loading) than the kit's four tones. Map
   those JS-set data-tone values onto the kit notice's left-rule so the message
   still reads its disposition. (info is the kit default.) */
.account-notice[data-tone="success"] { border-left-color: var(--green); }
.account-notice[data-tone="warning"],
.account-notice[data-tone="loading"] { border-left-color: var(--yellow); }
.account-notice[data-tone="error"] { border-left-color: var(--red); color: var(--red); }

/* ---- TREATMENT-TONE ACCENT — the per-project left-rule color ----
   The project cards (kit .cl-card[data-accent]) color the kit's left rule by the
   read disposition. Each entry only sets --cl-accent (the kit's left-rule color
   var); the kit paints it. */
.project-card[data-treatment-tone="reading"] { --cl-accent: var(--read-running); }
.project-card[data-treatment-tone="urgent"] { --cl-accent: var(--red); }
.project-card[data-treatment-tone="working"] { --cl-accent: var(--yellow); }
.project-card[data-treatment-tone="ready"] { --cl-accent: var(--green); }
.project-card[data-treatment-tone="stalled"] { --cl-accent: var(--locked); }
.project-card[data-treatment-tone="unread"] { --cl-accent: var(--gold-display); }

/* The slate grid collapses to a single column on narrow screens (the kit card is
   already a vertical stack; only the column count folds). */
@media (max-width: 860px) {
  .cl-grid.projects-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .projects-view {
    padding: 0 16px 60px;
  }
}

/* ---- SLATE-MINT STACK — unnamed minted projects as ONE empty add-card ----
   Freshly slate-minted projects arrive UNNAMED ("Untitled project N"). The slate
   renderer (projects-list.js) never paints them as tiles; it collapses the run into
   ONE empty add-card — the EXACT cl.cardEmpty add/stack the project page uses for
   granted-but-unrun reads — labeled "Set up your new project" with an "N ready"
   count. The kit (10-kit.css) styles it; no bespoke rule needed here. */

/* The intake form is kept in the DOM as a hidden submission scaffold the run path
   reads (FormData); it is never shown. .hidden already exists; this is belt-and-
   suspenders so the scaffold can't paint even if a stray .open is toggled. */
.intake-scaffold.hidden { display: none !important; }

/* Locked (read-only) title in existing-project setup mode. */
#setup-title.locked { opacity: 0.7; cursor: default; }

/* Major 1: sourced market-scan claim links — underlined, ink on hover. */
.market-src { text-decoration: underline; }
.market-src:hover { color: var(--ink); }

/* PERF: slate loading skeletons — brief placeholder cards shown while the project
   list loads (the slate shell paints before /api/projects resolves). */
.project-skeleton {
  min-height: 132px;
  border: 1px solid var(--border);
  background: var(--surface);
  opacity: 0.6;
  animation: skeleton-pulse 1.2s var(--ease) infinite;
}
@keyframes skeleton-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .project-skeleton { animation: none; } }