/* 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-ground);
  --fn-surface:       var(--cx-panel);
  --fn-surface-2:     var(--cx-panel-sunken);
  --fn-surface-hover: var(--cx-panel-sunken);
  --fn-border:        var(--cx-line);
  --fn-text:          var(--cx-ink);
  --fn-text-muted:    var(--cx-ink-3);
  --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-ground); color: var(--cx-ink); }
.fn-surface {
  background: var(--cx-panel);
  border: 1px solid var(--cx-line);
  border-radius: var(--fn-radius);
  box-shadow: var(--cx-shadow-card);
}
.fn-muted { color: var(--cx-ink-3); }
.fn-mono, .mono { font-family: var(--cx-font-mono); font-feature-settings: "tnum"; }
.fn-inter { font-family: var(--cx-font); }
/* Display type — the one moment of scale (Home greeting). Inter, per the v3 DS. */
.fn-display { font-family: var(--cx-font); 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-hover); }

/* 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); }
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--cx-line-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-panel-sunken); font-family: var(--cx-font-mono); }
.markdown pre { padding: 10px; border-radius: 6px; background: var(--cx-panel-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-line); 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-panel-sunken); border: 1px solid var(--cx-line); color: var(--cx-ink-2); cursor: pointer;
}
.fn-plan-btn:hover { background: var(--cx-line-2); color: var(--cx-ink); }
.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-panel-sunken); border: 1px solid var(--cx-line); border-radius: 8px;
  padding: 8px; max-height: 13rem; overflow: auto; color: var(--cx-ink-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-ink-2); }
.mr-field-label { display: block; margin-bottom: 4px; color: var(--cx-ink-3); }
.mr-field input,
.mr-field select,
.mr-field textarea {
  width: 100%;
  background: var(--cx-panel);
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  color: var(--cx-ink);
}
.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-ink-on-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mr-start:hover { background: var(--cx-accent-bright); }

/* ── the companion, on the package's registers ─────────────────────────────
   Owner-approved 2026-09-01 from the anatomy render. This surface was the one
   thing in the build that never met the DS: centred italic prose, five
   unlabelled bespoke icon buttons, a composer whose field and Send did not
   share a baseline, and a user turn painted --cx-ink on --cx-accent, which are
   the same colour. Everything structural here is a package component; these
   rules are layout only. */
.fn-comp-head {
  display: flex; align-items: center; gap: var(--cx-s2);
  padding: 11px 13px; border-bottom: 1px solid var(--cx-line);
}
.fn-comp-mark {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: var(--cx-radius-sm);
  background: var(--cx-ai); border: 1px solid var(--cx-ai-line); color: var(--cx-ai-ink);
}
.fn-comp-mark .cx-icon { width: 14px; height: 14px; }
.fn-comp-name { font-size: var(--cx-h3); font-weight: var(--cx-w-semi); }
/* WHERE IT IS LOOKING is the one non-obvious fact about a companion that
   follows you around. The header used to spend its second line on "Helps
   across the whole app", which is what the thing is called. */
.fn-comp-where { font-size: var(--cx-sm); color: var(--cx-ink-3); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-comp-acts { margin-left: auto; display: flex; gap: 2px; flex: none; }

.fn-comp-turn-you {
  align-self: flex-end; max-width: 82%;
  background: var(--cx-panel-sunken); border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-lg); padding: 8px 12px; font-size: var(--cx-body);
}
.fn-comp-turn-cortex { max-width: 100%; font-size: var(--cx-h3); }

.fn-comp-foot {
  border-top: 1px solid var(--cx-line); padding: 11px 13px;
  display: flex; flex-direction: column; gap: var(--cx-s2);
}
.fn-comp-compose { display: flex; gap: var(--cx-s2); align-items: flex-end; }
.fn-comp-compose .cx-input { resize: none; max-height: 40vh; }
/* Send takes the field's own floor. `.cx-btn` sets no height, so on this row it
   measured 36.3 against the input's 38.9 — the same divergence the select had
   against the input, and the same fix: derive the floor from the field's rule
   rather than pick a number. */
.fn-comp-compose .cx-btn { min-height: calc(var(--cx-s2) * 2 + 2px + 1.55em); }
.fn-comp-hint {
  display: flex; align-items: center; gap: var(--cx-s2); flex-wrap: wrap;
  font-size: var(--cx-xs); color: var(--cx-ink-3);
}
.fn-comp-status { margin-left: auto; }
/* THE WHOLE COMPANION SUBTREE SITS OUTSIDE .cx-root, so the package's focus rule
   — `:where(.cx-root) :focus-visible { outline: none; box-shadow: ... }` — never
   reaches it. The recessed type's own `.cx-input:focus-visible` is unscoped, so
   the field DID get the DS ring; what it did not get was the `outline: none`
   that goes with it, and Chrome's default blue ring painted on top of it. Two
   rings, one of them the browser's. Same root cause as the chat launcher's bare
   UA ring, which is the second symptom of one structural fact: #fn-companion-root
   is a sibling of #fn-shell, not a descendant. Restated here for the subtree. */
.fn-comp-panel :focus-visible { outline: none; box-shadow: var(--cx-focus-ring); }