/* ═══ JagSim News — the BASIC free page (/news-desk) ═══════════════════════════
   Built 2026-08-22. This is the free tier's news page and it is deliberately
   plain: one column, headlines you can actually read, a ticker lookup, and Trade
   on Chart. Nothing frosts. Nothing is teased.

   WHY THIS FILE EXISTS AT ALL. Before today the free news page WAS the paid desk
   with `body.news-free` applied — two readable headlines and a blur over the rest.
   Owner: "I wanted the free news page to be fucking basic and the premium pro news
   page on the intel tab to be an awesome news page people would wanna pay for."
   You cannot get both out of one page and a filter, so there are now two pages.

   It loads AFTER css/news-desk.*.css and reuses that file's `.story` card, which
   is why <main> still carries `.jag-newsdesk`. All this file does is flatten the
   two-column desk grid to one column and add the free page's own chrome. Do not
   copy the card styles down here — one card implementation, two pages.

   THE ONE RULE: no rule in this file may key off `body.news-free`. That class is
   the PAID desk's read-lock hook (css/news-desk.*.css:234). bootDesk's 'free' mode
   never sets it, and if a rule here ever depends on it, the free page starts
   frosting itself the moment someone reuses the class.
   ══════════════════════════════════════════════════════════════════════════ */

/* ONE COLUMN, AND A READABLE ONE. The desk grid is main + a 260px rail; the free page
   has no rail, so `display:block` alone let every card stretch the full 1224px of the
   app shell. A headline set on a 1200px line with the Chart button marooned at the far
   right is not "basic", it is unfinished. 880px is the same measure the story teaser is
   already capped at (62ch), so the card stops looking half-empty in the middle. */
/* ── WIDTH: FILL THE PAGE ──────────────────────────────────────────────────
   Owner, 2026-08-22: "I see you doing that same shit where you have a lot of space
   left on the page. Make sure you utilize space... You need to make sure it's actually
   filling the page like a normal site."

   He is right, and 880px was the tell: on a 1495px window that is 615px of empty
   margin - 41% of the viewport doing nothing. A reading column is correct for an
   ARTICLE, where line length is the constraint. This is a FEED: a list of independent
   cards, where the constraint is how many you can see at once. Every real news site
   answers that with more columns, not more whitespace.

   So: a wide container, and above 1120px the stories become two columns. The head,
   brief, lookup and trending row stay full width across the top, because they are one
   thing each - splitting them would be the "less centered" mess he is describing. */
.jag-newsbasic .desk-grid { display: block; }
.jag-newsbasic .desk-main { min-width: 0; max-width: 1360px; }
.jag-newsbasic .newsb-head { max-width: 1360px; }

@media (min-width: 1120px) {
  .jag-newsbasic #newsFeed {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; align-items: start;
  }
  /* align-items:start matters: without it every card in a row stretches to the tallest,
     so a three-line headline pads a one-line neighbour with dead space - which is the
     same wasted-space complaint again, just moved inside the grid. */
}
@media (min-width: 1600px) {
  .jag-newsbasic .desk-main, .jag-newsbasic .newsb-head { max-width: 1560px; }
  .jag-newsbasic #newsFeed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Page head ──────────────────────────────────────────────────────────── */
.newsb-head { padding: 8px 0 2px; }
.newsb-head h1 { font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.newsb-head .lede { color: var(--muted); font-size: 14px; margin-top: 4px; max-width: 62ch; }

/* ── Today's line: date + server-truth session + freshest headline ───────── */
.jag-newsbasic .news-brief {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 16px; margin: 12px 0 14px;
}
.jag-newsbasic .news-brief .nb-top {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.jag-newsbasic .news-brief .nb-session.open { color: #0b6b4f; }
.jag-newsbasic .news-brief .nb-session.closed { color: #8a4620; }
.jag-newsbasic .news-brief .nb-head {
  margin-top: 7px; font-size: 15.5px; font-weight: 800; line-height: 1.35; color: var(--text);
}

/* ── Trending: ONE line, always ───────────────────────────────────────────
   The row renders 10 chips and wrapped to two lines at this column width, which
   pushed the first headline below the fold and left two chips orphaned on their own
   line. It is a glance-and-move-on control, so it scrolls instead of wrapping. */
.jag-newsbasic .trend-row {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
  padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.jag-newsbasic .trend-row > * { flex: 0 0 auto; }

/* ── Lookup ─────────────────────────────────────────────────────────────── */
.jag-newsbasic .lookup { display: flex; gap: 8px; max-width: 460px; }
.jag-newsbasic .lookup input {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text);
}
.jag-newsbasic .lookup input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.jag-newsbasic .lookup button {
  flex: 0 0 auto; padding: 10px 16px; font-size: 14px; font-weight: 800; cursor: pointer;
  border: 0; border-radius: 9px; background: var(--green); color: var(--ink);
}
.jag-newsbasic .lookup button:hover { background: var(--green-dark); }
.jag-newsbasic .lookup-hint { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ── The Pro strip. ONE, at the BOTTOM, after the reader has had the news ──
   Never a wall, never mid-feed, never over a headline. It sells what Intel
   actually does differently (your book), not access to today's news. */
.newsb-pro {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin: 22px 0 0; padding: 14px 16px;
  background: #fff8f3; border: 1px solid #ecd0bb; border-left: 3px solid var(--pro); border-radius: 12px;
}
.newsb-pro .np-main { flex: 1 1 240px; min-width: 0; }
.newsb-pro .np-badge {
  display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .06em;
  color: #fff; background: var(--pro); padding: 2px 7px; border-radius: 999px; margin-bottom: 5px;
}
.newsb-pro .np-h { margin: 0; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.newsb-pro .np-p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); max-width: 56ch; }
.newsb-pro .np-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; text-decoration: none;
  background: var(--pro); color: #fff; font-weight: 800; font-size: 13.5px;
  padding: 9px 15px; border-radius: 9px; white-space: nowrap;
}
.newsb-pro .np-cta:hover { background: var(--pro-dark); }

@media (max-width: 640px) {
  .newsb-head h1 { font-size: 21px; }
  .jag-newsbasic .lookup { max-width: none; }
  .newsb-pro { padding: 13px 14px; }
  .newsb-pro .np-cta { width: 100%; justify-content: center; }
}


/* ══ DARK MODE ══════════════════════════════════════════════════════════════
   THE PAGE SHIPPED UNREADABLE IN DARK MODE. Measured live on /news-desk:

     .newsb-head h1   #0f172a on #090d14  = 1.09:1   <- the word "News", invisible
     .newsb-head .lede                    = 3.34:1   <- below the 4.5 AA minimum

   Cause, and it is worth naming precisely because it will happen again: the app sets
   `color-scheme: dark` inline on <html>, which makes the BROWSER paint its canvas dark.
   Not one of the four stylesheets this page loads ever painted a background of its own,
   so the dark UA canvas showed through while every text colour stayed at its hardcoded
   light-mode value. The cards looked fine only because they set an explicit white.

   The lesson is the one in the design rules: never let the UA canvas be your background.
   Paint it from a token, in both themes, always.

   Flipping the TOKENS rather than each rule is deliberate - .story, .news-brief and the
   chips already read var(--surface)/var(--line)/var(--muted) from the shared desk CSS,
   so redefining four variables re-themes the whole feed and cannot drift out of sync
   with rules I did not write. Only genuinely hardcoded colours are restated below. */

html.intel-dark body.news-basic { background: var(--nb-page); }
html.intel-dark .jag-newsbasic,
html.intel-dark body.news-basic {
  --nb-page: #090d14;
  --surface: #111826;
  --line:    #26303f;
  --text:    #e8f0fb;
  --muted:   #9aa8bd;
  color: var(--text);
}
html.intel-dark .newsb-head h1 { color: var(--text); }
html.intel-dark .newsb-head .lede { color: var(--muted); }
html.intel-dark .jag-newsbasic .news-brief .nb-session.open { color: #4ade80; }
html.intel-dark .jag-newsbasic .news-brief .nb-session.closed { color: #e29061; }   /* lightened #8a4620, the light-mode rust - NOT amber, which this site bans as a status colour */
/* WRONG SELECTOR THE FIRST TIME, and worth leaving the reason: I targeted
   `.thumb.noimg` from reading the CSS, but the live class is plain `.thumb` - the
   placeholder gradient sits on the base rule, so every thumbnail kept a light mint
   square on a near-black card. Measured, not read: getComputedStyle reported
   `linear-gradient(135deg, rgb(238,244,241)…)` on all six thumbs. */
html.intel-dark body.news-basic .jag-newsdesk .story .thumb,
html.intel-dark body.news-basic .jag-newsdesk .story .thumb.noimg {
  background: linear-gradient(135deg, #16241d 0%, #101b16 100%);
  border-color: #263830;
}
html.intel-dark .jag-newsbasic .lookup input {
  background: var(--surface); border-color: var(--line); color: var(--text);
}
html.intel-dark .jag-newsbasic .lookup input::placeholder { color: var(--muted); }
/* The Pro strip was #fff8f3 - a cream panel glowing on a near-black page. Keep the warm
   Pro identity, at a weight that belongs in the dark. */
html.intel-dark .newsb-pro { background: #241a12; border-color: #4a3a2a; }
html.intel-dark .newsb-pro .np-h { color: var(--text); }
html.intel-dark .newsb-pro .np-p { color: var(--muted); }

/* Same treatment when the OS says dark and the app has not stamped a class, but never
   when the user has explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  html:not(.intel-light) body.news-basic { background: #090d14; }
  html:not(.intel-light) .jag-newsbasic,
  html:not(.intel-light) body.news-basic {
    --nb-page: #090d14; --surface: #111826; --line: #26303f;
    --text: #e8f0fb; --muted: #9aa8bd; color: var(--text);
  }
  html:not(.intel-light) .newsb-head h1 { color: var(--text); }
  html:not(.intel-light) .newsb-head .lede { color: var(--muted); }
  html:not(.intel-light) .newsb-pro { background: #241a12; border-color: #4a3a2a; }
  html:not(.intel-light) .newsb-pro .np-h { color: var(--text); }
  html:not(.intel-light) .newsb-pro .np-p { color: var(--muted); }
}

/* And the LIGHT ground painted explicitly too, for the same reason. */
body.news-basic { background: var(--nb-page, #f6f8fa); }


/* ── CONTROLS INSIDE A DARK CARD ───────────────────────────────────────────
   Flipping the page tokens re-themed everything that READ a token, and left behind
   exactly the controls that hardcode their own colours. The result was worse than
   before the dark pass, because now light text sat on those hardcoded light surfaces:

     "Read"   #e8f0fb on #ffffff  = 1.15:1   invisible
     "Chart"  white on #27c96f    = 2.17:1   plus a white 1px border glowing in the dark

   Measured on the live page, both scoped to body.news-basic so Intel's Tape - which has
   its own dark treatment - is not touched. */
html.intel-dark body.news-basic .jag-newsdesk .story .actions .read {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
html.intel-dark body.news-basic .jag-newsdesk .story .actions .read:hover {
  background: #1a2333; border-color: #3a4a63;
}
/* The green CTA keeps its brand colour but loses the white outline, and takes ink dark
   enough to actually read on that green. */
html.intel-dark body.news-basic .jag-newsdesk .story .actions .trade {
  border-color: transparent; color: #05140c;
}

@media (prefers-color-scheme: dark) {
  html:not(.intel-light) body.news-basic .jag-newsdesk .story .thumb,
  html:not(.intel-light) body.news-basic .jag-newsdesk .story .thumb.noimg {
    background: linear-gradient(135deg, #16241d 0%, #101b16 100%); border-color: #263830;
  }
  html:not(.intel-light) body.news-basic .jag-newsdesk .story .actions .read {
    background: transparent; color: var(--text); border: 1px solid var(--line);
  }
  html:not(.intel-light) body.news-basic .jag-newsdesk .story .actions .trade {
    border-color: transparent; color: #05140c;
  }
}


/* ── TRENDING CHIPS WERE STILL WHITE PILLS ────────────────────────────────────
   Owner, twice: "why is the trending now on the free news page still translucent, and
   users are still having a hard time seeing those?"

   Not opacity — a hardcoded surface. news-desk.css:56 gives every .chip
   `background: #fff` with `color: var(--muted)`. Flipping the page tokens re-themed the
   TEXT and left the pill white, so muted grey ink sat on a white chip on a dark page:
   the chip glares, the label inside it disappears. Same shape as every other survivor
   tonight — the text token flipped, the hardcoded surface did not. */
html.intel-dark body.news-basic .jag-newsdesk .chip,
html.intel-dark body.news-basic .jag-newsdesk .chip.trend,
html.intel-dark body.news-basic .jag-newsdesk .chip.recent {
  background: var(--surface, #111826);
  border-color: var(--line, #26303f);
  color: var(--text, #e8f0fb);
}
html.intel-dark body.news-basic .jag-newsdesk .chip:hover {
  background: #1a2333; border-color: #3a4a63; color: var(--text, #e8f0fb);
}
html.intel-dark body.news-basic .jag-newsdesk .chip.on {
  background: #0d2c20; border-color: #1f5540; color: #6fe0a8;
}
html.intel-dark body.news-basic .jag-newsdesk .chip .trend-count {
  background: #26303f; color: var(--text, #e8f0fb);
}
@media (prefers-color-scheme: dark) {
  html:not(.intel-light) body.news-basic .jag-newsdesk .chip,
  html:not(.intel-light) body.news-basic .jag-newsdesk .chip.trend,
  html:not(.intel-light) body.news-basic .jag-newsdesk .chip.recent {
    background: var(--surface, #111826); border-color: var(--line, #26303f);
    color: var(--text, #e8f0fb);
  }
  html:not(.intel-light) body.news-basic .jag-newsdesk .chip .trend-count {
    background: #26303f; color: var(--text, #e8f0fb);
  }
}