/* ═══ Intel Tape — the PAID news desk (/research?mode=news) ═══════════════════
   Built 2026-08-22 alongside js/research/intel-tape.js. Read that file's header
   for why the free and paid news pages were split in two.

   Everything here is scoped under `.jag-newsdesk` (the shared card vocabulary) or
   `.intel-tape` (this desk's own chrome), because research.html ships its own
   .lookup / .chip / .wrap and the two vocabularies collide.

   IT LAYERS, IT DOES NOT FORK. The story card still comes from
   css/news-desk.*.css. This file only adds what the paid desk has on top: The Drop,
   the book rail, the catch-up bar, the on-your-book flag and the why-line. If you
   find yourself restyling `.story` down here, stop — that is the drift that produced
   two pages pretending to be one.

   `body.news-free` still frosts this desk for logged-out / free visitors, and that
   is CORRECT here: this is the surface Pro buys. It must never be applied to
   /news-desk. See css/news-basic.css.
   ══════════════════════════════════════════════════════════════════════════ */

.intel-tape { --pro: #BB5C2D; --pro-dark: #a04f26; }

/* ── The Drop ─────────────────────────────────────────────────────────────────
   Top of the desk, deliberately the biggest thing on it. The pitch is "you can be
   done in a minute", so it must read as a finished object, not a preview of the
   feed below. */
.intel-tape .td {
  background: linear-gradient(135deg, #0f2a22 0%, #123a2c 100%);
  border-radius: 14px; padding: 16px 18px 14px; color: #eaf5ef;
}
.intel-tape .td-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.intel-tape .td-k { font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #7fe3b6; }
.intel-tape .td-date { font-size: 12px; font-weight: 700; color: #9fc4b4; }
.intel-tape .td-read {
  margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #b8e6d0; background: rgba(127, 227, 182, .14); border: 1px solid rgba(127, 227, 182, .3);
  padding: 3px 9px; border-radius: 999px;
}
.intel-tape .td-lede { margin: 7px 0 0; font-size: 13px; line-height: 1.45; color: #b9d6c9; }
.intel-tape .td-list { margin: 11px 0 0; padding: 0; list-style: none; counter-reset: drop; }
.intel-tape .td-item {
  counter-increment: drop; position: relative; padding: 9px 0 9px 26px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.intel-tape .td-item:first-child { border-top: 0; }
.intel-tape .td-item::before {
  content: counter(drop); position: absolute; left: 0; top: 10px;
  font-size: 11px; font-weight: 900; color: #7fe3b6;
}
.intel-tape .td-line {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: #fff;
}
.intel-tape .td-line:hover { color: #7fe3b6; text-decoration: underline; }
.intel-tape .td-why { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: #8fd3b2; }
.intel-tape .td-note { margin: 11px 0 0; font-size: 11px; line-height: 1.45; color: #7f9c8e; }

/* ── Catch-up bar ─────────────────────────────────────────────────────────── */
.intel-tape .tape-catchup {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin-top: 10px; padding: 9px 13px;
  background: #eef7f2; border: 1px solid #cbe7da; border-radius: 10px;
  font-size: 13px; color: #14503c;
}
.intel-tape .tape-catchup .tc-dot { width: 8px; height: 8px; border-radius: 50%; background: #0b9e6a; flex: 0 0 auto; }
.intel-tape .tape-catchup.is-clear { background: #f4f6f8; border-color: #e2e8ee; color: #5b6675; }
.intel-tape .tape-catchup.is-clear .tc-dot { background: #b3bdc9; }
.intel-tape .tape-catchup .tc-txt { flex: 1 1 auto; min-width: 0; }
.intel-tape .tape-catchup .tc-btn {
  flex: 0 0 auto; cursor: pointer; border: 0; border-radius: 7px; padding: 5px 11px;
  background: #0b6b4f; color: #fff; font-size: 12px; font-weight: 800;
}
.intel-tape .tape-catchup .tc-btn:hover { background: #08543e; }

/* ── Your book rail ───────────────────────────────────────────────────────── */
.intel-tape .tb { margin-top: 12px; }
.intel-tape .tb-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.intel-tape .tb-k { font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #5b6675; }
.intel-tape .tb-sub { font-size: 12px; color: #8a94a6; }
.intel-tape .tb-row {
  display: flex; gap: 7px; margin-top: 7px; overflow-x: auto; padding-bottom: 3px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.intel-tape .tb-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 11px; border-radius: 999px; border: 1px solid #dbe2ea; background: #fff;
  font-size: 12.5px; font-weight: 800; color: #384456;
}
.intel-tape .tb-chip:hover { border-color: #0b6b4f; color: #0b6b4f; }
/* Held names read heavier than watched ones — you own those, they matter more. */
.intel-tape .tb-chip.is-held { background: #e8f7ef; border-color: #bfe6d2; color: #0b6b4f; }
.intel-tape .tb-chip .tb-n {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0b6b4f; color: #fff; font-size: 10.5px; font-weight: 900;
}
.intel-tape .tb-chip:not(.is-held) .tb-n { background: #7b8798; }
.intel-tape .tb-empty {
  margin-top: 12px; padding: 13px 15px; background: #f7f9fb;
  border: 1px dashed #d5dde6; border-radius: 11px;
}
.intel-tape .tb-empty p { margin: 5px 0 8px; font-size: 13px; line-height: 1.45; color: #5b6675; max-width: 54ch; }
.intel-tape .tb-empty-cta { font-size: 13px; font-weight: 800; color: #006E4E; text-decoration: none; }
.intel-tape .tb-empty-cta:hover { text-decoration: underline; }

/* ── On-your-book flag + why-line, injected into the shared story card ─────── */
.jag-newsdesk .story .tape-flag {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px;
  padding: 3px 9px; border-radius: 999px;
  background: #eef1f4; border: 1px solid #e0e6ee;
  font-size: 10.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: #51607a;
}
.jag-newsdesk .story .tape-flag.is-held { background: #e8f7ef; border-color: #bfe6d2; color: #0b6b4f; }
.jag-newsdesk .story .tape-flag .tf-pos { letter-spacing: 0; text-transform: none; font-weight: 800; opacity: .85; }
.jag-newsdesk .story .tape-flag .tf-cost { letter-spacing: 0; text-transform: none; font-weight: 700; opacity: .8; }
/* A story on your book gets a green edge, so the tape is scannable without reading. */
.jag-newsdesk .story.on-book { border-left: 3px solid #0b9e6a; }
.jag-newsdesk .story.is-flash { animation: tapeFlash 1.2s ease-out; }
@keyframes tapeFlash {
  0%, 40% { background: #eaf8f1; }
  100% { background: transparent; }
}

/* ── Save for later ───────────────────────────────────────────────────────── */
.jag-newsdesk .story .actions .tape-save {
  cursor: pointer; border: 1px solid #dbe2ea; background: #fff; border-radius: 8px;
  padding: 6px 11px; font-size: 12px; font-weight: 800; color: #5b6675;
}
.jag-newsdesk .story .actions .tape-save:hover { border-color: #0b6b4f; color: #0b6b4f; }
.jag-newsdesk .story .actions .tape-save.is-on { background: #e8f7ef; border-color: #bfe6d2; color: #0b6b4f; }

/* ── Free preview on the PAID desk ────────────────────────────────────────────
   A free user landing on Intel's Tape sees the real shape of the thing — The Drop
   header, their own book rail, the flags — with the feed bodies gated by the
   existing news-free rules. Selling the shape beats selling a blur. */
body.news-free .intel-tape .td-list { filter: blur(6px); pointer-events: none; user-select: none; opacity: .72; }
body.news-free .intel-tape .td::after {
  content: "Pro reads the full Drop every morning.";
  display: block; margin-top: 11px; font-size: 12.5px; font-weight: 800; color: #7fe3b6;
}

/* Mobile: the shared card turns .actions into a full-width ROW at 900px
   (css/news-desk.*.css:232), where a stretched button looks wrong next to the two
   that ship centred. Match the sibling rule for .news-save rather than inventing a
   second alignment for the same row. */
@media (max-width: 900px) {
  .jag-newsdesk .story .actions .tape-save { align-self: center; }
}
@media (max-width: 720px) {
  .intel-tape .td { padding: 14px 15px 12px; border-radius: 12px; }
  .intel-tape .td-line { font-size: 14px; }
  .intel-tape .td-read { margin-left: 0; }
  .intel-tape .tb-sub { display: block; width: 100%; }
  .jag-newsdesk .story .actions .tape-save { padding: 6px 10px; }
}

/* ── The seam between your names and the rest of the wire ──────────────────── */
.jag-newsdesk .story-list .tape-seam {
  display: flex; align-items: center; gap: 10px; margin: 4px 2px 0;
  font-size: 10.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: #8a94a6;
}
.jag-newsdesk .story-list .tape-seam::before,
.jag-newsdesk .story-list .tape-seam::after {
  content: ""; flex: 1 1 auto; height: 1px; background: #e0e6ee;
}
.jag-newsdesk .story-list .tape-seam[hidden] { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   DARK THEME — this file shipped 2026-08-22 with ZERO dark rules.
   grep -c 'data-intel-theme|data-chart-theme|prefers-color-scheme' returned 0.

   So on the dark desk the paid Tape layer painted, in its first 200px: a saturated green
   gradient card, a #f4f6f8 near-white catch-up bar, and white pill chips — three light
   surfaces stacked on a near-black page. That is precisely what the owner was looking at
   when he wrote "what's with this stupid white bar called tape? I don't like it. It's
   fucking dumb." The bar was not a design choice; it was an unthemed default.

   Values are the Intel dark palette, not new colours: card #151D29, tile #101620,
   ink #F1F4F7 (15.35:1), muted #A7B0BE (7.74:1), accent #3dce8a (8.38:1). */

html[data-intel-theme="dark"] .intel-tape .tape-drop {
  background: linear-gradient(135deg, #16202e 0%, #1B2533 100%);
  border-color: var(--intel-line, #263142);
}
html[data-intel-theme="dark"] .intel-tape .tape-catchup {
  background: #12241d; border-color: #1f4436; color: var(--intel-ink, #F1F4F7);
}
html[data-intel-theme="dark"] .intel-tape .tape-catchup.is-clear {
  background: var(--intel-tile, #101620); border-color: var(--intel-line, #263142);
  color: var(--intel-mut, #A7B0BE);
}
html[data-intel-theme="dark"] .intel-tape .tape-catchup.is-clear .tc-dot { background: #4a5666; }
html[data-intel-theme="dark"] .intel-tape .tape-catchup .tc-btn { background: #27C96F; color: #04140c; }
html[data-intel-theme="dark"] .intel-tape .tape-catchup .tc-btn:hover { background: #3dce8a; }

/* THE WHITE SLAB. .tape-book is the "YOUR BOOK" card — #f7f9fb, a white panel sitting on
   a near-black page, and the single loudest thing in his screenshot. */
html[data-intel-theme="dark"] .intel-tape .tape-book {
  background: var(--intel-card, #151D29); border-color: var(--intel-line, #263142);
  color: var(--intel-ink, #F1F4F7);
}
html[data-intel-theme="dark"] .intel-tape .tb-chip {
  background: var(--intel-tile, #101620); border-color: var(--intel-line, #263142);
  color: var(--intel-ink, #F1F4F7);
}
html[data-intel-theme="dark"] .intel-tape .tb-chip.is-held {
  background: #0d2c20; border-color: #1f5540; color: #6fe0a8;
}
html[data-intel-theme="dark"] .intel-tape .tb-chip .tb-n { background: #27C96F; color: #04140c; }
html[data-intel-theme="dark"] .intel-tape .tb-chip:not(.is-held) .tb-n {
  background: #3a4557; color: var(--intel-ink, #F1F4F7);
}
html[data-intel-theme="dark"] .jag-newsdesk .story .tape-flag {
  background: var(--intel-tile, #101620); border-color: var(--intel-line, #263142);
  color: var(--intel-mut, #A7B0BE);
}
html[data-intel-theme="dark"] .jag-newsdesk .story .tape-flag.is-held {
  background: #0d2c20; border-color: #1f5540; color: #6fe0a8;
}