/* Shared app styles layered on top of the Cortex DS token layer (public/shared/ds/).
   Every color enters as a var(--cx-*) token — no raw hex lives here (restyle-token-lint).
   The DS ships the v3 warm-paper elevated-card identity; this file only wires app-local
   classes to those tokens. */

/* ── Legacy --fn-* custom properties are now ALIASES of the DS --cx-* tokens, so any
   straggler that still reads --fn-* keeps working while the surface migrates. ── */
:root {
  --fn-bg:            var(--cx-bg);
  --fn-surface:       var(--cx-surface-1);
  --fn-surface-2:     var(--cx-surface-2);
  --fn-surface-hover: var(--cx-surface-2);
  --fn-border:        var(--cx-border);
  --fn-text:          var(--cx-text);
  --fn-text-muted:    var(--cx-text-muted);
  --fn-accent:        var(--cx-accent);
  --fn-accent-2:      var(--cx-accent-bright);
  --fn-accent-blue:   var(--cx-info);
  --fn-radius:        var(--cx-radius-lg);
}
.fn-bg { background: var(--cx-bg); color: var(--cx-text); }
.fn-surface {
  background: var(--cx-surface-1);
  border: 1px solid var(--cx-border);
  border-radius: var(--fn-radius);
  box-shadow: var(--cx-shadow-resting);
}
.fn-muted { color: var(--cx-text-muted); }
.fn-mono, .mono { font-family: var(--cx-font-mono); font-feature-settings: "tnum"; }
.fn-inter { font-family: var(--cx-font-sans); }
/* Display type — the one moment of scale (Home greeting). Inter, per the v3 DS. */
.fn-display { font-family: var(--cx-font-sans); font-weight: 700; letter-spacing: -0.02em; }
/* Soften every Tailwind-rounded surface a touch. */
.rounded-xl { border-radius: var(--fn-radius) !important; }
.rounded-lg { border-radius: 11px !important; }
/* Gentle lift on interactive surfaces. */
.fn-surface, button, input, textarea, select { transition: background-color .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
/* Elevated-card lift on hover (the v3 language: rows feel pickable). */
.fn-surface:hover { box-shadow: var(--cx-shadow-raised); }

/* Shimmering momentum bar — from the template, now copper-toned. */
.fn-shimmer {
  background: linear-gradient(90deg, var(--cx-accent) 0%, var(--cx-accent-bright) 25%, var(--cx-accent) 50%, var(--cx-accent-bright) 75%, var(--cx-accent) 100%);
  background-size: 200% 100%;
  animation: fn-shimmer 15s ease-in-out infinite;
}
@keyframes fn-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Area heat ratings (1-4) — tinted semantic washes (tone = meaning). */
.fn-r1 { background: var(--cx-error-wash); color: var(--cx-error); }  /* hottest */
.fn-r2 { background: var(--cx-warn-wash);  color: var(--cx-warn); }
.fn-r3 { background: var(--cx-warn-wash);  color: var(--cx-warn); }
.fn-r4 { background: var(--cx-ok-wash);    color: var(--cx-ok); }     /* coolest */

html, body { height: 100%; }
body { font-family: var(--cx-font-sans); }
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--cx-border-strong); border-radius: 4px; }
.fade-in { animation: fade-in .2s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }
.markdown p { margin: .5em 0; }
.markdown code { padding: 1px 4px; border-radius: 3px; background: var(--cx-surface-2); font-family: var(--cx-font-mono); }
.markdown pre { padding: 10px; border-radius: 6px; background: var(--cx-surface-sunken); overflow-x: auto; }
.markdown ul, .markdown ol { padding-left: 1.5em; margin: .4em 0; }
.markdown ul { list-style: disc; }   /* restore markers against the Tailwind preflight reset */
.markdown ol { list-style: decimal; }
.markdown h1, .markdown h2, .markdown h3 { font-weight: 600; margin: .8em 0 .3em; }

/* ── Assistant "alive while working" indicator — three pulsing accent dots.
   Animate opacity/transform only (cheap, GPU-friendly). ── */
.fn-dots { display: inline-flex; gap: 3px; align-items: center; }
.fn-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cx-accent);
  display: inline-block;
  animation: fn-dots-pulse 1.1s ease-in-out infinite;
}
.fn-dots i:nth-child(2) { animation-delay: .18s; }
.fn-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes fn-dots-pulse {
  0%, 80%, 100% { opacity: .3; transform: scale(.75); }
  40% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fn-dots i { animation: none; opacity: .7; }
}

/* Phase 2a — plan-mode card (design § 4). The plan card lives inside the chat thread;
   changed cards pulse after a revision; the item grammar buttons are accept/edit/note/cancel. */
.fn-plan-item { border-left: 2px solid var(--cx-border); padding-left: 8px; }
.fn-plan-gate { border-left-color: var(--cx-warn); }
.fn-plan-btn {
  font-size: 12px; line-height: 1; padding: 3px 7px; border-radius: 6px;
  background: var(--cx-surface-2); border: 1px solid var(--cx-border); color: var(--cx-text-2); cursor: pointer;
}
.fn-plan-btn:hover { background: var(--cx-surface-3); color: var(--cx-text); }
.fn-plan-pulse { animation: fn-plan-pulse 1.4s ease-in-out 2; border-left-color: var(--cx-warn); }
@keyframes fn-plan-pulse {
  0%, 100% { background: transparent; }
  40% { background: color-mix(in oklab, var(--cx-warn) 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .fn-plan-pulse { animation: none; }
}

/* Phase 2b — unified activity trail + whole-flow rollback (design § 5/§ 6).
   Before/after blocks are PLAIN TEXT, never +/- diff lines; wrapped + scrollable. */
.fn-ba {
  font-family: var(--cx-font-mono);
  font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  background: var(--cx-surface-sunken); border: 1px solid var(--cx-border); border-radius: 8px;
  padding: 8px; max-height: 13rem; overflow: auto; color: var(--cx-text-2);
}
.fn-choices label:hover { background: color-mix(in oklab, var(--cx-accent) 8%, transparent); border-radius: 6px; }

/* ── Market-research launcher — the new-report draft fields (research-page.js renders this
   server-side with semantic .mr-* classes, so no inline Tailwind utilities reach it; the
   rows are wired to DS tokens HERE). Matches the hygiene/research-data launcher look:
   stacked, labeled rows with full-width controls (not run-on inline text). ── */
.mr-launcher { display: flex; flex-direction: column; gap: 12px; }
.mr-field { display: block; font-size: 12px; color: var(--cx-text-2); }
.mr-field-label { display: block; margin-bottom: 4px; color: var(--cx-text-muted); }
.mr-field input,
.mr-field select,
.mr-field textarea {
  width: 100%;
  background: var(--cx-surface-1);
  border: 1px solid var(--cx-border);
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  color: var(--cx-text);
}
.mr-field textarea { min-height: 72px; resize: vertical; }
.mr-start {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--cx-accent);
  color: var(--cx-text-on-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mr-start:hover { background: var(--cx-accent-bright); }