/* ═══ SAVE AND MAKE A NOTE — the two controls on every headline row ═══════════
   Lifted out of css/news-desk.20260818a.css on 2026-09-28 so the PUBLIC news page
   can wear the same two controls. /news carries its own inline stylesheet and no
   link to the desk sheet, so the only way it could have had these buttons before
   was a second copy of the rules — and a second copy is how one surface's Save
   ends up looking and behaving unlike the other two.

   Selectors, values and order are the ones news-desk.css shipped: this is a move,
   not a rewrite. Loaded by /news, /news-desk and /research. The one added line is
   the --ctl-line declaration below, which news-desk.css already sets for the two
   desk pages and which /news has no other source for.
   ══════════════════════════════════════════════════════════════════════════ */
.jag-newsdesk { --ctl-line: var(--jag-line, #75828F); }

/* ══ SAVE AND MAKE A NOTE, ON EVERY HEADLINE ROW ═══════════════════════════
   Owner, 2026-09-28: put Save and Make a note on the free news page, lock what is
   Pro and say Unlock with Pro.

   Both controls are ordinary bordered buttons on both tiers. Neither is greyed,
   neither is dead, and neither is styled as a Pro thing: what a member presses
   looks the same whatever they pay, and the ANSWER is where the tier shows up.
   Green is BUY on this site, so nothing here is green; the burnt-orange accent is
   owned by .jag-unlock-pro in css/tokens.css and is not repainted here.
   ════════════════════════════════════════════════════════════════════════════ */
.jag-newsdesk .story .actions .nd-act {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 100%; min-height: 32px;
  padding: 7px 10px; margin: 0;
  border: 1px solid var(--ctl-line); border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2;
  cursor: pointer;
}
.jag-newsdesk .story .actions .nd-act:hover { border-color: var(--text); }
.jag-newsdesk .story .actions .nd-act:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* SELECTED IS OUTLINED, NOT FILLED. A saved headline reads as "on" by its ring and
   its word, so the state survives a colour-blind read and never borrows BUY green. */
.jag-newsdesk .story .actions .nd-save.is-on {
  border: 2px solid var(--jag-accent); color: var(--jag-accent-text); box-shadow: none;
}
/* The answer to a press belongs on the card that was pressed, not in a page banner.
   Bordered so it is plainly a reply and not part of the headline, and it is never in
   the DOM before a press — owner: "don't show it if they didn't click it because
   that's just wasting space." */
.jag-newsdesk .story .nd-prompt {
  grid-column: 1 / -1; width: 100%; margin: 2px 0 0; padding: 9px 10px;
  border: 1px solid var(--ctl-line); border-radius: 8px;
  background: var(--bg);
  font-size: 11.5px; line-height: 1.45; color: var(--text);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.jag-newsdesk .story .nd-prompt-t { flex: 1 1 100%; min-width: 0; margin: 0; }
/* THE TEXT TAKES THE FIRST LINE, THE CONTROLS THE SECOND. (owner, 2026-09-29: the
   Unlock control was squashed into a corner of the row and pushed the card out of
   shape.) In a 400px card the sentence, the Unlock control and the X could not share
   one line; forcing them to left the control a few characters wide. The sentence
   now has a line of its own, and the control and the X sit together under it. */
.jag-newsdesk .story .nd-prompt .jag-unlock-pro,
.jag-newsdesk .story .nd-prompt .nd-go { flex: 0 0 auto; margin-right: auto; }
/* The reply's way on: a bordered link to the Research News room, not an Unlock. */
.jag-newsdesk .story .nd-prompt .nd-go {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  border: 1px solid var(--ctl-line); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 700; text-decoration: none; line-height: 1.2;
}
.jag-newsdesk .story .nd-prompt .nd-go:hover { border-color: var(--text); }
.jag-newsdesk .story .nd-prompt .nd-go:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 767px) { .jag-newsdesk .story .nd-prompt .nd-go { min-height: 44px; } }
/* The X's LOOK is the site's one close button, drawn by css/tokens.css (which names .nd-prompt-x;
   Batch UI9, 2026-10-10). It was a 28px square with an 8px corner. Only its place in the row is here. */
.jag-newsdesk .story .nd-prompt-x { flex: 0 0 auto; margin-left: auto; }

html[data-chart-theme="dark"] .jag-newsdesk .story .actions .nd-act,
html[data-intel-theme="dark"] .jag-newsdesk .story .actions .nd-act,
:root[data-theme="dark"] .jag-newsdesk .story .actions .nd-act {
  background: #141c2b; border-color: #98a2b3; color: #f1f4f7;
}
html[data-chart-theme="dark"] .jag-newsdesk .story .actions .nd-act:hover,
html[data-intel-theme="dark"] .jag-newsdesk .story .actions .nd-act:hover,
:root[data-theme="dark"] .jag-newsdesk .story .actions .nd-act:hover { border-color: #f1f4f7; }
html[data-chart-theme="dark"] .jag-newsdesk .story .actions .nd-save.is-on,
html[data-intel-theme="dark"] .jag-newsdesk .story .actions .nd-save.is-on,
:root[data-theme="dark"] .jag-newsdesk .story .actions .nd-save.is-on {
  border: 2px solid var(--jag-accent); color: var(--jag-accent-text); box-shadow: none;
}
html[data-chart-theme="dark"] .jag-newsdesk .story .nd-prompt,
html[data-intel-theme="dark"] .jag-newsdesk .story .nd-prompt,
:root[data-theme="dark"] .jag-newsdesk .story .nd-prompt {
  background: #0f1624; border-color: #98a2b3; color: #f1f4f7;
}

/* ── THE NOTE SHEET ────────────────────────────────────────────────────────
   The writing surface, opened only by a member who can actually write. A free
   member pressing Add a note gets the bordered prompt on the card instead: an
   earlier cut opened this sheet with its fields readonly, which is a writing
   surface nobody can write in. */
.nd-sheet-back {
  position: fixed; inset: 0; z-index: 10060;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(12, 18, 28, .48);
}
.nd-sheet {
  width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  box-sizing: border-box; padding: 18px 20px 20px;
  background: #fff; color: #0f172a;
  border: 1px solid var(--jag-line, #75828F); border-radius: var(--jag-radius, 9px);
  box-shadow: 0 24px 64px rgba(12, 18, 28, .28);
  font-family: inherit;
}
.nd-sheet-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.nd-sheet-hd h2 { margin: 0; flex: 1 1 auto; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.nd-sheet-story { margin: 0 0 8px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.nd-sheet-plain { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #4b5563; }
.nd-f { display: block; margin: 0 0 12px; }
.nd-f-k {
  display: block; margin-bottom: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #4b5563;
}
.nd-in, .nd-ta {
  box-sizing: border-box; width: 100%; padding: 9px 11px;
  border: 1px solid var(--jag-line, #75828F); border-radius: 10px;
  background: #fff; color: #0f172a;
  font-family: inherit; font-size: 13.5px; line-height: 1.45;
}
.nd-ta { resize: vertical; min-height: 96px; }
.nd-in:focus-visible, .nd-ta:focus-visible { outline: 2px solid #0f172a; outline-offset: 1px; }
.nd-sheet-msg {
  margin: 0 0 10px; padding: 8px 10px;
  border: 1px solid var(--jag-line, #75828F); border-radius: 8px;
  font-size: 12.5px; line-height: 1.45;
}
.nd-sheet-msg[hidden] { display: none !important; }
.nd-sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.nd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-height: 36px; padding: 8px 14px;
  border: 1px solid var(--jag-line, #75828F); border-radius: var(--jag-radius, 9px);
  background: #fff; color: #0f172a;
  font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1.2;
  cursor: pointer;
}
.nd-btn:hover { border-color: #0f172a; }
.nd-btn:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }
.nd-btn-go { border-color: #0f172a; box-shadow: inset 0 0 0 1px #0f172a; }
.nd-sheet-x { flex: 0 0 auto; }

html[data-chart-theme="dark"] .nd-sheet,
html[data-intel-theme="dark"] .nd-sheet,
:root[data-theme="dark"] .nd-sheet { background: #141c2b; color: #f1f4f7; border-color: #98a2b3; }
html[data-chart-theme="dark"] .nd-sheet-plain,
html[data-intel-theme="dark"] .nd-sheet-plain,
:root[data-theme="dark"] .nd-sheet-plain,
html[data-chart-theme="dark"] .nd-f-k,
html[data-intel-theme="dark"] .nd-f-k,
:root[data-theme="dark"] .nd-f-k { color: #a7b0be; }
html[data-chart-theme="dark"] .nd-in,
html[data-intel-theme="dark"] .nd-in,
:root[data-theme="dark"] .nd-in,
html[data-chart-theme="dark"] .nd-ta,
html[data-intel-theme="dark"] .nd-ta,
:root[data-theme="dark"] .nd-ta { background: #0f1624; color: #f1f4f7; border-color: #98a2b3; }
html[data-chart-theme="dark"] .nd-btn,
html[data-intel-theme="dark"] .nd-btn,
:root[data-theme="dark"] .nd-btn { background: #141c2b; color: #f1f4f7; border-color: #98a2b3; }
html[data-chart-theme="dark"] .nd-btn:hover,
html[data-intel-theme="dark"] .nd-btn:hover,
:root[data-theme="dark"] .nd-btn:hover { border-color: #f1f4f7; }
html[data-chart-theme="dark"] .nd-btn-go,
html[data-intel-theme="dark"] .nd-btn-go,
:root[data-theme="dark"] .nd-btn-go { border: 2px solid var(--jag-accent); color: var(--jag-accent-text); box-shadow: none; }
html[data-chart-theme="dark"] .nd-sheet-msg,
html[data-intel-theme="dark"] .nd-sheet-msg,
:root[data-theme="dark"] .nd-sheet-msg { border-color: #98a2b3; }
html[data-chart-theme="dark"] .nd-in:focus-visible,
html[data-intel-theme="dark"] .nd-in:focus-visible,
:root[data-theme="dark"] .nd-in:focus-visible,
html[data-chart-theme="dark"] .nd-ta:focus-visible,
html[data-intel-theme="dark"] .nd-ta:focus-visible,
:root[data-theme="dark"] .nd-ta:focus-visible,
html[data-chart-theme="dark"] .nd-btn:focus-visible,
html[data-intel-theme="dark"] .nd-btn:focus-visible,
:root[data-theme="dark"] .nd-btn:focus-visible { outline-color: #f1f4f7; }

/* PHONES: 44px on everything a thumb lands on (owner rule). */
@media (max-width: 767px) {
  /* ONE ACTION ROW THAT READS AS ONE ROW (batch-M1, owner's phone 2026-10-02). Under
     900px the actions are a flex row, and Save and Add a note are width:100% buttons,
     so they took the room and squeezed the two links: "Chart P-KRAK →" became a narrow
     dark box three lines tall and "Read" sat at the top of a tall empty box. On a phone
     the Chart link takes the full width on top, and Read, Save and Add a note share the
     row under it in three equal columns, every one 44px tall with its words centred. */
  .jag-newsdesk .story .actions {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; align-items: stretch; min-width: 0;
  }
  .jag-newsdesk .story .actions > * { min-width: 0; margin: 0; }
  .jag-newsdesk .story .actions > .trade { grid-column: 1 / -1; }
  .jag-newsdesk .story .actions > a,
  .jag-newsdesk .story .actions > .nd-act {
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    min-height: 44px; padding: 8px 10px; box-sizing: border-box; width: 100%;
    white-space: normal; line-height: 1.2;
  }
  .jag-newsdesk .story .actions .nd-act { min-height: 44px; }
  .jag-newsdesk .story .nd-prompt { font-size: 12px; }
  .jag-newsdesk .story .nd-prompt .jag-unlock-pro { flex: 1 1 100%; order: 3; }
  .nd-btn { min-height: 44px; }
  .nd-in { min-height: 44px; }   /* the Ticker field measured 43px: one short of the tap floor (Batch UI9) */
  .nd-sheet { width: 100%; padding: 16px; }
}