/* ──────────────────────────────────────────────────────────────────────────
   RECATOOLS — editorial dynamic-block components (the 5 <rt-component> types)
   ----------------------------------------------------------------------------
   The canonical reader-facing look of fact-grid / verdict / timeline / compare
   / severity, lifted VERBATIM from resources/views/news/show.blade.php so the
   TipTap composer is true WYSIWYG — the editor canvas renders each component
   exactly as the published article does.

   Tokens (--rt-*) come from public/assets/css/rt-tokens.css — load that FIRST.

   SINGLE SOURCE OF TRUTH: both the TipTap editor canvas (resources/js/editor/
   index.js, which carries the `article-body` class) AND the public reader page
   (resources/views/news/show.blade.php) consume THIS file — the inline copies
   were removed from show.blade.php on 2026-06-03 (follow-up to P3-7.1, see
   docs/editorial-ingestion-design.md §18).

   SPECIFICITY NOTE — why some selectors carry an `.article-body` / `aside`
   prefix. On the reader page <body class="rt-theme-v2">, so every rule in the
   page's nested `.rt-theme-v2 { … }` block (incl. the generic prose rules
   `.article-body th|td|p|aside`) gains +1 class of specificity, landing at
   (0,2,1). A bare `.news-compare thead th` (0,1,2) would therefore LOSE to the
   page's `.article-body th`, and `.article-body .news-verdict` (0,2,0) would
   lose to `.article-body aside`. To preserve the exact reader-page cascade we
   raise ONLY the selectors that have a competing generic rule to the
   `.article-body …` tier (and verdict → `aside.news-verdict`). Both contexts
   nest these under `.article-body`, so the prefix matches in the editor too.
   This file MUST be linked AFTER the page's inline <style> so equal-specificity
   ties (e.g. verdict box vs `.article-body aside`) resolve in its favour.
   ────────────────────────────────────────────────────────────────────────── */

/* Compare — comparison table */
.news-compare { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-family: var(--rt-font-sans); font-size: 14px; }
.article-body .news-compare thead th { text-align: left; padding: 12px 14px; background: var(--rt-bg-inset); border-bottom: 1px solid var(--rt-hairline); font-family: var(--rt-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rt-ink-muted); }
.article-body .news-compare tbody td { padding: 12px 14px; border-bottom: 1px solid var(--rt-hairline); color: var(--rt-ink); line-height: 1.5; }
.news-compare tbody tr:hover td { background: var(--rt-bg-inset); }
.news-compare tbody tr:last-child td { border-bottom: none; }
.news-compare td strong { color: var(--rt-ink); font-weight: 600; }

/* Timeline — vertical chronology with a rule + nodes */
.news-timeline { list-style: none; padding: 0; margin: 1.75rem 0; position: relative; }
.news-timeline::before { content: ''; position: absolute; left: 70px; top: 4px; bottom: 4px; width: 1px; background: var(--rt-hairline); }
.news-timeline > li { display: grid; grid-template-columns: 80px 1fr; align-items: start; gap: 18px; padding: 10px 0; position: relative; }
.news-timeline > li::before { content: ''; position: absolute; left: 66px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--rt-accent); border: 2px solid var(--rt-bg); z-index: 1; }
.news-timeline time { font-family: var(--rt-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.05em; color: var(--rt-ink-muted); text-transform: uppercase; padding-top: 4px; }
.news-timeline > li > div { padding-left: 12px; }
.news-timeline strong { font-family: var(--rt-font-sans); color: var(--rt-ink); font-size: 15px; font-weight: 600; display: block; margin-bottom: 4px; }
.article-body .news-timeline p { font-family: var(--rt-font-sans); font-size: 14px; color: var(--rt-ink-muted); margin: 0; line-height: 1.5; }

/* Fact grid — navy slab with mono numerics */
.news-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 2rem 0; padding: 22px 24px; background: var(--rt-result-bg); color: var(--rt-result-ink); border-radius: 8px; }
.news-fact { display: flex; flex-direction: column; gap: 4px; }
.news-fact strong { font-family: var(--rt-font-mono); font-size: 24px; font-weight: 500; color: var(--rt-result-ink); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.news-fact span { font-family: var(--rt-font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rt-result-muted); line-height: 1.4; }

/* Severity badge — cybersec CVSS pill */
.news-severity { display: inline-block; padding: 3px 10px; border-radius: 4px; font-family: var(--rt-font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 2px; }
.news-severity.sev-critical { background: #b91c1c; color: #fff; }
.news-severity.sev-high { background: #d97706; color: #fff; }
.news-severity.sev-medium { background: #facc15; color: #422006; }
.news-severity.sev-low { background: var(--rt-hairline); color: var(--rt-ink); }

/* Verdict — editorial point-of-view card. Scoped `.article-body aside.news-verdict`
   (0,2,1) so it ties the page's generic `.article-body aside` callout; the file
   is linked AFTER the page styles, so the tie resolves here (full bordered card,
   not the left-bar callout). Font fall-through (15px / sans) still comes from
   `.article-body aside`, which intentionally also matches. See header note. */
.article-body aside.news-verdict {
    margin: 2.5rem 0;
    padding: 18px 22px 20px;
    border: 1px solid color-mix(in srgb, var(--rt-accent) 35%, var(--rt-hairline));
    border-radius: 10px;
    background: color-mix(in srgb, var(--rt-accent) 5%, var(--rt-bg-inset));
}
.news-verdict .verdict-head {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
    margin: 0 0 11px; padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--rt-accent) 20%, var(--rt-hairline));
}
.news-verdict .verdict-label {
    font-family: var(--rt-font-mono);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--rt-accent);
}
.news-verdict .verdict-tag {
    font-family: var(--rt-font-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--rt-ink-muted);
}
.news-verdict .verdict-tag::before {
    content: "·"; margin-right: 8px;
    color: color-mix(in srgb, var(--rt-accent) 55%, var(--rt-ink-muted));
}
.article-body aside.news-verdict p { font-family: var(--rt-font-sans); font-size: 16px; color: var(--rt-ink); line-height: 1.68; margin: 0; }
.article-body aside.news-verdict p + p { margin-top: 12px; }

/* Sources & cross-checks footer — compact inset "source note" card. Two markup
   forms: legacy flat <p class="article-sources"> and the structured
   <aside class="article-sources"> with a .src-label + <dl class="src-list"> of
   Primary / Corroborated / Verified rows. Moved here from show.blade.php so the
   editor canvas + reader preview style it identically to the published page. */
.article-body .article-sources {
    margin: 2.25rem 0 0;
    padding: 16px 20px;
    background: var(--rt-bg-inset);
    border: 1px solid var(--rt-hairline);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--rt-ink-muted);
    max-width: 100%;
}
.article-body hr:has(+ .article-sources) { display: none; }
.article-body .article-sources a {
    color: var(--rt-ink);
    text-decoration: underline;
    text-decoration-color: var(--rt-hairline);
    text-underline-offset: 2px;
}
.article-body .article-sources a:hover {
    color: var(--rt-accent);
    text-decoration-color: var(--rt-accent);
}
.article-body p.article-sources { margin-bottom: 0; }
.article-body p.article-sources strong {
    display: inline-block;
    font-family: var(--rt-font-mono);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--rt-ink);
    margin-right: 5px;
}
.article-body aside.article-sources .src-label {
    margin: 0 0 11px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--rt-hairline);
    font-family: var(--rt-font-mono);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--rt-ink);
}
.article-body aside.article-sources .src-list { display: grid; gap: 8px; margin: 0; }
.article-body aside.article-sources .src-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px; align-items: baseline;
}
/* Imported articles emit dt/dd DIRECTLY under .src-list (the .src-row <div>
   wrapper doesn't survive the ingest sanitiser's <dl> content model). Lay those
   out as the same two-column label|value rows, without touching the hand-
   authored .src-row form above. */
.article-body aside.article-sources .src-list:has(> dt) {
    grid-template-columns: 96px 1fr;
    column-gap: 14px;
    align-items: baseline;
}
.article-body aside.article-sources dt {
    font-family: var(--rt-font-mono);
    font-size: 10px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--rt-ink-muted);
}
.article-body aside.article-sources dd { margin: 0; color: var(--rt-ink-muted); }
@media (max-width: 520px) {
    .article-body aside.article-sources .src-list:has(> dt) { grid-template-columns: 1fr; row-gap: 2px; }
    .article-body aside.article-sources .src-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Embed — click-to-load facade (P3-12). 16:9 placeholder; nothing third-party
   loads until the reader clicks the button. */
.news-embed { position: relative; margin: 2rem 0; border: 1px solid var(--rt-hairline); border-radius: 10px; overflow: hidden; background: var(--rt-result-bg); }
.news-embed-btn { display: flex; align-items: center; gap: 14px; width: 100%; aspect-ratio: 16 / 9; padding: 0 24px; border: 0; background: linear-gradient(135deg, #0d1b2a, #1b2a3d); color: #fff; cursor: pointer; text-align: left; }
.news-embed-play { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--rt-accent); color: #fff; font-size: 20px; padding-left: 3px; box-shadow: 0 6px 20px -6px rgba(232,98,42,.7); }
.news-embed-btn:hover .news-embed-play { transform: scale(1.06); }
.news-embed-text { display: flex; flex-direction: column; gap: 3px; }
.news-embed-text strong { font-family: var(--rt-font-sans); font-size: 15px; font-weight: 600; }
.news-embed-text small { font-family: var(--rt-font-mono); font-size: 11px; color: #8aa0b6; }
.news-embed-open { position: absolute; top: 10px; right: 12px; font-family: var(--rt-font-mono); font-size: 10.5px; color: #cdd9e5; text-decoration: none; background: rgba(0,0,0,.35); padding: 3px 8px; border-radius: 999px; }
.news-embed-open:hover { color: #fff; }
.news-embed-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.news-embed .twitter-tweet { margin: 12px auto !important; }

/* Mobile (matches news/show.blade.php @media 640px) */
@media (max-width: 640px) {
    .news-timeline > li { grid-template-columns: 60px 1fr; gap: 12px; }
    .news-timeline::before { left: 56px; }
    .news-timeline > li::before { left: 51px; }
    .news-fact-grid { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
    .news-compare { font-size: 13px; }
    .article-body .news-compare thead th, .article-body .news-compare tbody td { padding: 8px 10px; }
}
