/* ============================================================================
   KRISON AI — Wall Street / NYSE skin
   ----------------------------------------------------------------------------
   The palette lives in theme.json (shadcn HSL variables). This file does the
   character work on top of it: the typography of a financial broadsheet, and
   the number discipline of a trading terminal.

   Two rules govern everything here:

   1. SYSTEM FONTS ONLY. No webfont CDN — it would add a third-party request on
      every page load, leak visitors' IPs to that CDN, and block rendering for
      a styling nicety. The stacks below reach real Georgia/Charter on every
      desktop OS and degrade to a decent serif elsewhere.
   2. NUMBERS ARE TABULAR. Every figure in this product is meant to be compared
      down a column — expected TSR against expected TSR. Proportional digits
      make that comparison harder for no benefit, so `tabular-nums` is applied
      wherever numbers appear.
   ========================================================================= */

:root {
  --ws-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter,
              Georgia, "Times New Roman", serif;
  --ws-mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono",
             Menlo, Consolas, monospace;
  --ws-brass: hsl(45 53% 55%);
  --ws-gain: hsl(162 72% 42%);
  --ws-loss: hsl(0 74% 60%);
  --ws-rule: hsl(var(--border));
}

/* ── Masthead ──────────────────────────────────────────────────────────────
   A broadsheet nameplate: serif, letterspaced, with the hairline rule under it
   that every financial paper uses to separate masthead from copy. */
#header,
header {
  border-bottom: 1px solid var(--ws-rule);
  box-shadow: 0 1px 0 hsl(var(--background));
}

/* ── Headings: the broadsheet voice ─────────────────────────────────────── */
.message-content h1,
.message-content h2,
.message-content h3,
#welcome-screen h1 {
  font-family: var(--ws-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.message-content h1 {
  font-size: 1.6rem;
  border-bottom: 2px solid var(--ws-rule);
  padding-bottom: 0.35rem;
  margin-bottom: 0.75rem;
}

.message-content h2 {
  font-size: 1.22rem;
  border-bottom: 1px solid var(--ws-rule);
  padding-bottom: 0.25rem;
  margin-top: 1.4rem;
}

/* Section headings read as standing column headers, not as shouting. */
.message-content h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ws-brass);
}

/* ── Numbers ───────────────────────────────────────────────────────────────
   The whole point of the skin. Applied broadly because figures appear in
   prose ("expected TSR 22.1%") as often as in tables. */
.message-content,
.message-content p,
.message-content li,
.message-content td,
.message-content th {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── Tables: the tape ──────────────────────────────────────────────────────
   Scenario tables and scoring matrices are the substance of the output, so
   they get ruled borders, a brass header rule, and right-aligned figures. */
.message-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0.9rem 0;
}

.message-content thead th {
  font-family: var(--ws-serif);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-align: left;
  color: var(--ws-brass);
  border-bottom: 2px solid var(--ws-brass);
  padding: 0.4rem 0.6rem;
  white-space: nowrap;
}

.message-content tbody td {
  border-bottom: 1px solid var(--ws-rule);
  padding: 0.38rem 0.6rem;
}

/* Ledger striping — faint, so it guides the eye without competing. */
.message-content tbody tr:nth-child(even) {
  background: hsl(var(--muted) / 0.35);
}

.message-content tbody tr:hover {
  background: hsl(var(--accent) / 0.5);
}

/* Numeric cells sit right so decimal points line up down the column. */
.message-content td:not(:first-child) {
  font-variant-numeric: tabular-nums;
}

/* ── Gain / loss semantics ─────────────────────────────────────────────────
   Bold inline figures are how the agents mark expected returns. Colour is a
   reinforcement, never the only signal — the sign is always written out too,
   which is what keeps this readable for colour-blind users. */
.message-content strong {
  font-variant-numeric: tabular-nums;
}

.ws-gain { color: var(--ws-gain); }
.ws-loss { color: var(--ws-loss); }

/* ── Verdict + roster call-outs ────────────────────────────────────────────
   The VERDICT line drives the whole workflow, so it should read as a stamp. */
.message-content p > strong:only-child {
  display: inline-block;
  font-family: var(--ws-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--ws-brass);
  color: var(--ws-brass);
  padding: 0.12rem 0.5rem;
  border-radius: 2px;
}

/* ── Agent steps: the desk log ─────────────────────────────────────────────
   "Financial Analyzer · outlook · round 2" should look like a wire slug. */
.step,
[data-step] {
  font-family: var(--ws-mono);
}

.step-name,
[class*="step"] button {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.78rem;
}

/* ── Blockquote: the disclaimer ────────────────────────────────────────────
   Deliberately *not* de-emphasised. A more authoritative-looking page makes it
   more important, not less, that this cannot be mistaken for advice. */
.message-content blockquote {
  border-left: 3px solid var(--ws-brass);
  background: hsl(var(--muted) / 0.4);
  padding: 0.6rem 0.9rem;
  margin: 1rem 0;
  font-size: 0.86rem;
}

/* ── Code and citations ────────────────────────────────────────────────────*/
.message-content code {
  font-family: var(--ws-mono);
  font-size: 0.86em;
  background: hsl(var(--muted) / 0.6);
  border: 1px solid var(--ws-rule);
  border-radius: 2px;
  padding: 0.05em 0.32em;
}

/* ── Login page ────────────────────────────────────────────────────────────
   The first thing anyone sees at krisonai.com, so it carries the nameplate. */
#auth-container,
form[class*="login"],
[class*="login"] form {
  border: 1px solid var(--ws-rule);
  border-top: 3px solid var(--ws-brass);
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: 0 18px 50px hsl(220 40% 2% / 0.55);
}

/* ── Ticker strip ──────────────────────────────────────────────────────────
   Populated by ticker.js. Decorative only — see the note in that file. */
#ws-ticker {
  position: sticky;
  top: 0;
  z-index: 40;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--ws-rule);
  background: hsl(var(--card));
  font-family: var(--ws-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  padding: 0.25rem 0;
}

#ws-ticker .ws-ticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: ws-scroll 42s linear infinite;
}

#ws-ticker .ws-sym {
  color: var(--ws-brass);
  font-weight: 600;
  margin-left: 1.6rem;
}

#ws-ticker .ws-note {
  margin-left: 1.6rem;
  font-style: italic;
  opacity: 0.75;
}

@keyframes ws-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Respect the OS setting — a perpetually scrolling strip is a genuine problem
   for vestibular disorders, and this is decoration, not information. */
@media (prefers-reduced-motion: reduce) {
  #ws-ticker .ws-ticker-track {
    animation: none;
    padding-left: 0;
  }
}