/* Financial Juice News tab. All rules scoped under .fj-* so nothing here can leak into
   another view. Inherits the app's CSS custom properties so it tracks the existing theme
   rather than re-declaring colours.
   NOTE: this file used to name `--fg` and `--card`, neither of which is defined anywhere
   the SPA loads — so eleven declarations were invalid at computed-value time and simply
   did not paint (the selected filter chip was invisible, story cards had no surface).
   They are now `--text` / `--surface`. Every remaining colour is a token, so the three
   palettes and both modes come for free.

   SURFACE v3: the page is a tinted ground and every block on it is a floating card — the
   header, the tape summary, the filter bar, each story, the just-in strip. They are
   separated by a gap rather than by rules, so `.fj-wrap` is a flex column and the old
   per-block margin-bottoms are gone. Labels are tracked mono capitals, figures are mono
   and tabular, and running prose is capped near 74ch so a 1080px column stays readable.

   ⚠ .fj-story is REUSED by the Master Dashboard's "Live news" rail and its story modal
   (js/master-dashboard.js calls window.G10News.storyCardHtml). That rail deliberately
   flattens the card to flush, square, edge-to-edge rows. So the two declarations it does
   NOT reset — the card shadow and the card radius rung — are scoped to #view-news here.
   Everything else stays shared on purpose: the badge, tag and type treatments ARE the
   design language, and the dashboard should get them too. */

/* ── the page: a stack of cards on the ground ── */
.fj-wrap {
  max-width: 1080px; margin: 0 auto; padding: 4px 0 48px;
  display: flex; flex-direction: column; gap: clamp(12px, 1.5vw, 18px);
}

/* ── header card ── */
.fj-head {
  padding: clamp(14px, 1.4vw, 20px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
/* The serif family, the weight and the optical tracking come from surface.css's headline
   rule — only the size and the rhythm under it belong to this page. */
.fj-head h2 { margin: 0 0 4px; font-size: 22px; }
.fj-sub {
  margin: 0; max-width: 72ch;
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty;
}

/* ── stat strip ──
   A caption, not a label row: it reads as a sentence with numbers in it, so it keeps
   sentence case and takes mono only for the alignment of the figures themselves. */
.fj-stats {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.fj-stat {
  font: 400 11px/1.4 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.fj-stat b { color: var(--text); font-weight: 600; }
.fj-stat--muted { opacity: 0.7; }
.fj-stat--warn b { color: var(--warn-text); }

/* ── tape summary banner (the 1-2 sentence "what is the tape saying" line) ── */
.fj-tape-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  background: var(--surface);
}
/* The design's signature label: tracked mono capitals in the quietest tier. */
.fj-tape-summary-eyebrow {
  flex: 0 0 100%;
  font: 500 10.5px/1.4 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead);
}
.fj-tape-summary-text {
  flex: 1 1 42ch; max-width: 74ch;
  font-size: 14px; line-height: 1.6; color: var(--text); text-wrap: pretty;
}
.fj-tape-summary-when {
  margin-left: auto;
  font: 400 10.5px/1.5 var(--font-sans); color: var(--colhead); white-space: nowrap;
}
.fj-tape-summary--quiet {
  font-size: 13px; color: var(--text-muted);
  border-left-color: var(--line);
}

/* ── filters card ── */
.fj-filters {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.fj-frow { display: flex; flex-wrap: wrap; gap: 6px; }
.fj-chip {
  font: 500 10.5px/1 var(--font-sans); letter-spacing: .06em;
  padding: 6px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: transparent; color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.fj-chip:hover { border-color: var(--accent-edge); color: var(--text); }
/* Selected is an active control, so it takes the interactive accent rather than a plain
   text-colour inversion; --on-accent is the knockout colour minted for exactly this. */
.fj-chip.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.fj-chip--ghost { border-style: dashed; }
.fj-chip-n { opacity: .55; margin-left: 3px; font-variant-numeric: tabular-nums; }

/* ── story card ── */
.fj-list { display: flex; flex-direction: column; gap: 12px; }
.fj-story {
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px; background: var(--surface);
}
/* Scoped to this tab: the dashboard rail resets the radius but never a shadow, and a
   long-throw shadow under a flush edge-to-edge row would read as a mistake there. */
#view-news .fj-story { border-radius: var(--r-lg); box-shadow: var(--shadow-1); }

/* Impact is the only thing that gets a colour accent — it is the one field that should
   pull the eye across a long scroll. It rides the alert ladder (amber "watch" then orange
   "loud"), deliberately NOT bear-red: .fj-eff--bull/bear sits on the same card carrying
   DIRECTION, so a red rail on a high-impact bullish story read as bearish. The -dot rung
   is the full-strength member of each family, which a 3px solid rail needs; the badge
   takes the matching -tint rung so rail and badge agree with no second class in JS. */
.fj-imp--3 { border-left-color: var(--risk-dot); }
.fj-imp--2 { border-left-color: var(--warn-dot); }
.fj-imp--1 { border-left-color: var(--line); }

.fj-story-hd {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font: 400 10px/1.4 var(--font-sans); letter-spacing: .04em;
  color: var(--colhead); margin-bottom: 8px;
}
.fj-imp {
  font-weight: 600; color: var(--text-2);
  padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--surface-sunken);
  font-variant-numeric: tabular-nums;
}
.fj-imp--3 .fj-imp { background: var(--risk-tint); color: var(--risk-text); }
.fj-imp--2 .fj-imp { background: var(--warn-tint); color: var(--warn-text); }
.fj-driver {
  padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--surface-sunken); border: 1px solid var(--line); color: var(--text-2);
}
.fj-kind { opacity: .8; }
.fj-when { margin-left: auto; white-space: nowrap; }
.fj-flag {
  padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--bear-tint); color: var(--bear-text); font-weight: 600;
}

.fj-title {
  margin: 0 0 6px; max-width: 74ch;
  font-size: 15px; line-height: 1.35; font-weight: 600; text-wrap: pretty;
}
/* --text-2 rather than --text at .9 opacity: the secondary tier is the token minted for
   exactly this rung, and it is contrast-verified in every palette where an opacity is not. */
.fj-summary {
  margin: 0 0 10px; max-width: 74ch;
  font-size: 13px; line-height: 1.6; color: var(--text-2); text-wrap: pretty;
}

/* ── FX effect chips ── */
.fj-effects { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.fj-eff, .fj-axis {
  font: 500 10px/1.4 var(--font-sans); letter-spacing: .04em;
  padding: 3px 7px; border-radius: var(--r-xs); white-space: nowrap;
  border: 1px solid transparent;
}
.fj-eff--bull    { background: var(--bull-tint);  color: var(--bull-text); }
.fj-eff--bear    { background: var(--bear-tint);  color: var(--bear-text); }
.fj-eff--mixed   { background: var(--mixed-tint); color: var(--mixed-text); }
.fj-eff--neutral { color: var(--text-muted); border-color: var(--line); }
.fj-axis { color: var(--text-muted); border-color: var(--line); }

/* The one interactive line on the card, so it takes the accent rather than a muted
   underline — the design draws this affordance as mono accent text, no rule under it
   until hover. */
.fj-more {
  font: 500 10.5px/1 var(--font-sans); letter-spacing: .04em;
  padding: 0; border: 0; background: none;
  color: var(--accent); cursor: pointer; text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-micro) var(--ease-out);
}
.fj-more:hover { text-decoration: underline; }

/* ── member headlines ── */
.fj-members { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
.fj-hl {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; line-height: 1.6; padding: 2px 0;
}
.fj-hl-when {
  font: 400 10.5px/1.6 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--colhead); min-width: 62px; flex: 0 0 auto;
}
.fj-hl-txt { flex: 1 1 auto; }
.fj-hl-src {
  font: 400 10px/1.6 var(--font-sans); letter-spacing: .06em;
  color: var(--colhead); text-decoration: none; flex: 0 0 auto;
}
.fj-hl-src:hover { color: var(--accent); text-decoration: underline; }
.fj-hl.is-retracted .fj-hl-txt { text-decoration: line-through; opacity: .55; }

.fj-sup, .fj-ret, .fj-rev {
  font: 500 10px/1.4 var(--font-sans); letter-spacing: .04em;
  padding: 1px 5px; border-radius: var(--r-xs); white-space: nowrap; flex: 0 0 auto;
}
.fj-sup { color: var(--text-muted); border: 1px solid var(--line); }
.fj-ret { background: var(--bear-tint); color: var(--bear-text); font-weight: 600; }
.fj-rev { background: var(--warn-tint); color: var(--warn-text); }

/* ── just-in strip ──
   Dashed, because it is the pending tier rather than a published one — the same treatment
   the design gives every "nothing settled here yet" box. */
.fj-justin {
  padding: 14px 16px;
  border: 1px dashed var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.fj-justin-hd {
  margin: 0;
  font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead);
}
/* The plain-English gloss beside the label — sentence case, so the tracked capitals it
   sits against never read as jargon. */
.fj-justin-note {
  font: 400 12px/1.5 var(--font-sans); letter-spacing: normal; text-transform: none;
  color: var(--text-muted);
}

.fj-msg {
  margin: 0; padding: 22px; max-width: none;
  color: var(--text-muted); font-size: 13.5px; line-height: 1.6; text-wrap: pretty;
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.fj-msg--err { color: var(--bear-text); }
.fj-msg code {
  font-family: var(--font-sans); font-size: 12px; padding: 1px 5px; border-radius: var(--r-xs);
  background: var(--surface-sunken);
}
.fj-foot {
  margin: 6px 0 0; max-width: 88ch;
  font-size: 11px; color: var(--text-muted); line-height: 1.6;
}
.fj-foot a { color: var(--text-muted); }

/* ── responsive (additive; desktop rules above are untouched) ── */
@media (max-width: 760px) {
  .fj-wrap { padding: 4px 12px 40px; }
  .fj-when { margin-left: 0; width: 100%; }
  .fj-hl { flex-wrap: wrap; }
  .fj-hl-when { min-width: 0; }
}
@media (max-width: 520px) {
  .fj-title { font-size: 14px; }
  .fj-summary { font-size: 12.5px; }
  .fj-tape-summary-text { font-size: 13.5px; }
  .fj-tape-summary-when { margin-left: 0; }
  .fj-chip { padding: 5px 8px; }
}