/* TurboCore newsletter - components, charts and reading typography.
   Loaded after the plugin stylesheet.

   Breakpoints match the plugin stylesheet exactly (1024px, 640px). Rules are
   scoped to .soais-knowledge-update-template, which outranks the plugin's
   single-class selectors, so any layout rule the plugin sets inside a media
   query must be restated here at the same breakpoint or it will be overridden
   at every width.

   A few elements in the static template carry inline font-size, which beats any
   stylesheet. Those are the only places !important is used, and each is marked. */

/* ---------------------------------------------------------------
   1. Reading typography (desktop baseline)
   --------------------------------------------------------------- */

.soais-knowledge-update-template { font-size: 18px; line-height: 1.6; }

.soais-knowledge-update-template .issue-title { font-size: 40px; line-height: 1.18; letter-spacing: -0.02em; }
.soais-knowledge-update-template .issue-meta { font-size: 15px; }
.soais-knowledge-update-template .issue-badge { font-size: 13px; }
.soais-knowledge-update-template .issue-editorial { font-size: 19px; line-height: 1.6; }
/* The editorial is a container now, so its paragraphs carry the sizing. */
.soais-knowledge-update-template .issue-editorial p { font-size: 19px; line-height: 1.6; margin: 0 0 16px; }
.soais-knowledge-update-template .issue-editorial p:last-child { margin-bottom: 0; }

.soais-knowledge-update-template .philosophy-text { font-size: 16px; line-height: 1.6; }
.soais-knowledge-update-template .philosophy-icon { font-size: 20px; }

.soais-knowledge-update-template .filter-btn { font-size: 14px; }

/* Section headings sat at the same navy as the item headlines and only 1px
   apart in size, so a new section read as just another item. The indigo that
   used to sit behind every item number now belongs here instead, which is the
   one place on the page that should carry an accent. */
.soais-knowledge-update-template .theme-name { font-size: 25px; color: #6366f1; }
.soais-knowledge-update-template .theme-header { border-bottom-color: #6366f1; }
.soais-knowledge-update-template .theme-count { font-size: 13px; }
.soais-knowledge-update-template .theme-icon { font-size: 20px; }

/* One heading size and one paragraph size across the whole issue, so a quick
   hit reads at the same weight as a full item. Headings 21px, body 17.5px. */

/* Item numbers are ordinals, not signals. They all take the same quiet grey
   the quick hits already used, so nothing competes with the headline beside
   them. The badge colour is an inline style, hence !important. */
.soais-knowledge-update-template .k-number {
  font-size: 15px;
  background: #9da3af !important;
}
.soais-knowledge-update-template .k-headline { font-size: 21px; line-height: 1.35; }
.soais-knowledge-update-template .k-teaser { font-size: 17.5px; line-height: 1.58; }

/* ---------------------------------------------------------------
   2. Paragraph rhythm inside an expanded item
   Line spacing and paragraph spacing were near-identical, so a broken
   paragraph still read as one continuous block. Tighter leading, wider
   gap between paragraphs: roughly 10px between lines, 22px between
   paragraphs, so the break is unmistakable.
   --------------------------------------------------------------- */

.soais-knowledge-update-template .k-body-inner p,
.soais-knowledge-update-template .newsletter-content p {
  font-size: 17.5px;
  line-height: 1.58;
  margin: 0 0 22px;
}
.soais-knowledge-update-template .k-body-inner p:last-child { margin-bottom: 0; }

.soais-knowledge-update-template .k-body-inner ul,
.soais-knowledge-update-template .k-body-inner ol { margin: 0 0 22px; padding-left: 22px; }
.soais-knowledge-update-template .k-body-inner li { font-size: 17.5px; line-height: 1.58; margin-bottom: 8px; }

/* Subheadings ("What changed", "Why this matters for you") need clear air
   above them so each block reads as its own section. */
.soais-knowledge-update-template .k-body-inner h4 {
  font-size: 15px;
  letter-spacing: 0.05em;
  margin: 30px 0 10px;
}
.soais-knowledge-update-template .k-body-inner h4:first-child { margin-top: 0; }

.soais-knowledge-update-template .k-source { font-size: 14px; line-height: 1.7; }
.soais-knowledge-update-template .k-share-btn { font-size: 13px; }

/* Quick hits match the standard items exactly: same heading size, same body
   size, same leading and same paragraph gap. */
.soais-knowledge-update-template .quick-hit .k-headline { font-size: 21px; line-height: 1.35; }
.soais-knowledge-update-template .quick-hit p { font-size: 17.5px; line-height: 1.58; margin: 0 0 22px; }
.soais-knowledge-update-template .quick-hit p:last-of-type { margin-bottom: 0; }
/* Inline style on .k-number in the static template. */
.soais-knowledge-update-template .quick-hit .k-number { font-size: 15px !important; background: #9da3af !important; }

.soais-knowledge-update-template .sidebar-label { font-size: 12px; }
.soais-knowledge-update-template .past-issues-list a { font-size: 15px; }

/* Sidebar product promo.
   Homepage hero wording, one supporting line, and a solid Know More button
   through to the homepage. */
.soais-knowledge-update-template .sidebar-promo { padding: 22px 20px; }
.soais-knowledge-update-template .sidebar-promo h3 {
  font-size: 19px; line-height: 1.28; font-weight: 700;
  color: #ffffff; margin-bottom: 10px; letter-spacing: -0.01em;
}
.soais-knowledge-update-template .sidebar-promo-body { font-size: 14.5px; line-height: 1.55; color: #cbd5e1; }
.soais-knowledge-update-template .sidebar-promo-body p { font-size: 14.5px; line-height: 1.55; color: #cbd5e1; margin: 0 0 16px; }

.soais-knowledge-update-template .sidebar-promo .sidebar-promo-link {
  display: block; text-align: center;
  background: #6366f1; color: #ffffff;
  padding: 12px 16px; border-radius: var(--radius-sm, 6px);
  font-size: 15px; font-weight: 600; text-decoration: none;
  line-height: 1.2; transition: background 0.2s;
}
.soais-knowledge-update-template .sidebar-promo .sidebar-promo-link:hover { background: #4f46e5; color: #ffffff; }

/* ---------------------------------------------------------------
   3. Bottom of the page
   next-issue-title, next-issue-body and footer-note all carry inline
   font-size in the static template, so these need !important.
   --------------------------------------------------------------- */

.soais-knowledge-update-template .next-issue-title { font-size: 18px !important; line-height: 1.4 !important; }
.soais-knowledge-update-template .next-issue-body { font-size: 16.5px !important; line-height: 1.6 !important; }

.soais-knowledge-update-template .footer-stat-number { font-size: 28px; }
.soais-knowledge-update-template .footer-stat-label { font-size: 13.5px; }
.soais-knowledge-update-template .footer-text,
.soais-knowledge-update-template .footer-note { font-size: 15.5px !important; line-height: 1.6 !important; }
.soais-knowledge-update-template .footer-philosophy { font-size: 16px; line-height: 1.65; }

/* Desktop shell. The default was a 1080px wrapper with a 260px sidebar, which
   left the promo card narrow and very tall while a laptop had space to spare.
   Widening the sidebar to 340px shortens the card and pushes the content
   column right. Desktop only: below 1025px the plugin sets .main-content to
   max-width:100% and this must not fight it. */
@media (min-width: 1025px) {
  .soais-knowledge-update-template .page-wrapper { max-width: 1220px; }
  .soais-knowledge-update-template .sidebar { width: 340px; padding: 32px 28px; }
  .soais-knowledge-update-template .main-content { max-width: 780px; }
}

/* ---------------------------------------------------------------
   4. Charts written into item bodies
   The caption selectors carry an extra class so they outrank
   ".k-body-inner p", which would otherwise size them as body copy.
   --------------------------------------------------------------- */

.soais-knowledge-update-template {
  --c1: #6366f1;
  --c2: #d97706;
  --c3: #0d9488;
  --muted-fill: #cbd5e1;
}

.soais-knowledge-update-template .viz {
  margin: 26px 0 14px;
  padding: 16px;
  max-width: 100%;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 10px);
  background: var(--gray-50, #f9fafb);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.soais-knowledge-update-template .viz svg { display: block; width: 100%; height: auto; min-width: 520px; }
.soais-knowledge-update-template .viz .viz-t { font-size: 16.5px; font-weight: 650; color: var(--navy, #1a1a2e); margin: 0 0 4px; line-height: 1.4; }
.soais-knowledge-update-template .viz .viz-s { font-size: 14.5px; color: var(--gray-500, #6b7280); margin: 0 0 12px; line-height: 1.5; }
.soais-knowledge-update-template .viz .viz-n { font-size: 14.5px; color: var(--gray-600, #4b5563); margin: 14px 0 0; max-width: 70ch; line-height: 1.6; }
.soais-knowledge-update-template .viz .viz-src { font-size: 13px; color: var(--gray-400, #9ca3af); margin: 8px 0 0; line-height: 1.5; }

.soais-knowledge-update-template .viz .lb { font: 600 14px/1 inherit; fill: var(--navy, #1a1a2e); }
.soais-knowledge-update-template .viz .ax { font: 13px/1 inherit; fill: var(--gray-500, #6b7280); }
.soais-knowledge-update-template .viz .lg { font: 13px/1 inherit; fill: var(--gray-600, #4b5563); }
.soais-knowledge-update-template .viz .hero { font: 700 58px/1 inherit; fill: var(--c1); letter-spacing: -0.02em; }
.soais-knowledge-update-template .viz .axl { stroke: var(--border, #e2e8f0); stroke-width: 1; }

/* ---------------------------------------------------------------
   5. Breadcrumb
   --------------------------------------------------------------- */

.nl-breadcrumb { margin: 0 0 30px; font-size: 14px; color: var(--gray-500, #6b7280); }
.nl-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; padding: 0; }
.nl-breadcrumb li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nl-breadcrumb li + li::before { content: "/"; color: var(--gray-300, #d1d5db); }
.nl-breadcrumb a { color: var(--gray-500, #6b7280); text-decoration: none; }
.nl-breadcrumb a:hover { color: var(--indigo, #6366f1); }
.nl-breadcrumb [aria-current] { color: var(--navy, #1a1a2e); font-weight: 600; }

/* ---------------------------------------------------------------
   6. Source lists
   --------------------------------------------------------------- */

.k-source .k-source-label { color: var(--gray-600, #4b5563); font-weight: 600; }
.k-source .k-source-sep { margin: 0 8px; color: var(--gray-300, #d1d5db); }
.k-source .k-source-link { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.k-source .k-source-plain { color: var(--gray-500, #6b7280); }

/* ---------------------------------------------------------------
   7. Issue pager - rendered only when a neighbouring issue exists
   --------------------------------------------------------------- */

.issue-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 40px 0 8px; }
.issue-pager.issue-pager-single { grid-template-columns: 1fr; }
.issue-pager a {
  display: block; padding: 18px 20px;
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 10px);
  background: var(--white, #fff); text-decoration: none; transition: all 0.2s;
}
.issue-pager a:hover { border-color: var(--indigo, #6366f1); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08)); }
.issue-pager .pager-dir { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400, #9ca3af); margin-bottom: 7px; font-weight: 700; }
.issue-pager .pager-title { display: block; font-size: 16px; font-weight: 600; color: var(--navy, #1a1a2e); line-height: 1.4; }
.issue-pager .pager-next { text-align: right; }
.issue-pager.issue-pager-single .pager-next { text-align: left; }
.issue-pager-all { text-align: center; margin: 18px 0 0; font-size: 15px; }
.issue-pager-all a { color: var(--indigo, #6366f1); text-decoration: none; font-weight: 600; }
.issue-pager-all a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   8. Hub and track archives
   --------------------------------------------------------------- */

.nl-wrap { max-width: 1060px; margin: 0 auto; padding: 44px 24px 72px; font-size: 18px; line-height: 1.6; }
.nl-hero { margin-bottom: 34px; }
.nl-hero h1 { font-size: 38px; line-height: 1.18; color: var(--navy, #1a1a2e); margin: 0 0 14px; letter-spacing: -0.02em; }
.nl-hero p { font-size: 18px; color: var(--gray-600, #4b5563); line-height: 1.6; max-width: 64ch; margin: 0; }

.nl-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin: 30px 0 48px; }
.nl-track-card { border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 10px); padding: 26px; background: var(--white, #fff); }
.nl-track-card h2 { font-size: 21px; color: var(--navy, #1a1a2e); margin: 0 0 10px; }
.nl-track-card .nl-track-desc { font-size: 16px; color: var(--gray-500, #6b7280); line-height: 1.55; margin: 0 0 18px; }
.nl-track-card .nl-latest { border-top: 1px solid var(--border, #e2e8f0); padding-top: 16px; margin-top: 4px; }
.nl-track-card .nl-latest-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400, #9ca3af); font-weight: 700; margin-bottom: 8px; }
.nl-track-card .nl-latest a { font-size: 17px; font-weight: 600; color: var(--navy, #1a1a2e); text-decoration: none; line-height: 1.4; display: block; }
.nl-track-card .nl-latest a:hover { color: var(--indigo, #6366f1); }
.nl-track-card .nl-all { display: inline-block; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--indigo, #6366f1); text-decoration: none; }
.nl-track-card .nl-all:hover { text-decoration: underline; }

.nl-year { font-size: 14px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gray-400, #9ca3af); font-weight: 700; border-top: 1px solid var(--border, #e2e8f0); padding-top: 16px; margin: 38px 0 4px; }
.nl-issues { list-style: none; margin: 0; padding: 0; }
.nl-issue { border-bottom: 1px solid var(--border, #e2e8f0); padding: 20px 0; }
.nl-issue a { text-decoration: none; display: block; }
.nl-issue .nl-issue-meta { font-size: 13px; color: var(--gray-400, #9ca3af); margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.nl-issue .nl-badge { background: var(--indigo, #6366f1); color: #fff; border-radius: 20px; padding: 3px 11px; font-weight: 700; font-size: 12px; letter-spacing: 0.03em; }
.nl-issue .nl-badge-qa { background: var(--blue, #3b82f6); }
.nl-issue h3 { font-size: 20px; line-height: 1.35; color: var(--navy, #1a1a2e); margin: 0 0 8px; font-weight: 650; }
.nl-issue a:hover h3 { color: var(--indigo, #6366f1); }
.nl-issue p { font-size: 16px; color: var(--gray-500, #6b7280); line-height: 1.55; margin: 0; }
.nl-empty { padding: 30px 0; color: var(--gray-500, #6b7280); font-size: 17px; }

/* ---------------------------------------------------------------
   9. Tablet - matches the plugin's 1024px breakpoint, where the
   sidebar is hidden and the content goes full width.
   --------------------------------------------------------------- */

@media (max-width: 1024px) {
  .soais-knowledge-update-template .main-content { max-width: 100%; }
  .soais-knowledge-update-template .issue-title { font-size: 34px; }
  .soais-knowledge-update-template .issue-editorial,
  .soais-knowledge-update-template .issue-editorial p { font-size: 18px; }
}

/* ---------------------------------------------------------------
   10. Mobile - matches the plugin's 640px breakpoint
   --------------------------------------------------------------- */

@media (max-width: 640px) {
  .soais-knowledge-update-template { font-size: 17px; }
  .soais-knowledge-update-template .issue-title { font-size: 28px; line-height: 1.22; }
  .soais-knowledge-update-template .issue-meta { font-size: 14px; }
  .soais-knowledge-update-template .issue-editorial,
  .soais-knowledge-update-template .issue-editorial p { font-size: 17.5px; }
  /* Same single heading size and single body size on mobile. */
  .soais-knowledge-update-template .k-headline,
  .soais-knowledge-update-template .quick-hit .k-headline { font-size: 19px; line-height: 1.35; }
  .soais-knowledge-update-template .k-teaser,
  .soais-knowledge-update-template .k-body-inner p,
  .soais-knowledge-update-template .k-body-inner li,
  .soais-knowledge-update-template .quick-hit p { font-size: 16.5px; line-height: 1.6; }
  .soais-knowledge-update-template .k-body-inner p,
  .soais-knowledge-update-template .quick-hit p { margin-bottom: 20px; }
  .soais-knowledge-update-template .k-body-inner h4 { margin-top: 26px; }
  /* Keep the section heading a clear step above the 19px item headlines. */
  .soais-knowledge-update-template .theme-name { font-size: 21px; }
  .soais-knowledge-update-template .k-source { font-size: 13.5px; }
  .soais-knowledge-update-template .next-issue-title { font-size: 17px !important; }
  .soais-knowledge-update-template .next-issue-body { font-size: 16px !important; }
  .soais-knowledge-update-template .footer-text,
  .soais-knowledge-update-template .footer-note { font-size: 15px !important; }
  .soais-knowledge-update-template .footer-stat-number { font-size: 23px; }

  /* Charts scroll inside their own box rather than stretching the page. */
  .soais-knowledge-update-template .viz { padding: 12px; }
  .soais-knowledge-update-template .viz svg { min-width: 460px; }

  .nl-wrap { padding: 30px 18px 56px; font-size: 17px; }
  .nl-hero h1 { font-size: 27px; }
  .nl-hero p { font-size: 17px; }
  .nl-track-card { padding: 20px; }
  .nl-issue h3 { font-size: 18px; }

  .issue-pager { grid-template-columns: 1fr; }
  .issue-pager .pager-next { text-align: left; }
}


/* ---------------------------------------------------------------
   11. Promo banner for mobile and tablet
   The sidebar is hidden below 1024px, so the same promo is rendered
   into the content column and shown only at those widths.
   --------------------------------------------------------------- */

.nl-promo-banner { display: none; }

@media (max-width: 1024px) {
  .nl-promo-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 30px;
    background: var(--navy, #1a1a2e);
    color: #ffffff;
    border-radius: var(--radius, 10px);
    padding: 28px 30px;
    margin: 44px 0 8px;
  }
  .nl-promo-banner .nl-promo-copy { flex: 1 1 380px; min-width: 0; }
  .nl-promo-banner h2 {
    font-size: 23px; line-height: 1.25; font-weight: 700;
    color: #ffffff; margin: 0 0 10px; letter-spacing: -0.01em;
  }
  .nl-promo-banner .nl-promo-body p {
    font-size: 16px; line-height: 1.55; color: #cbd5e1;
    margin: 0; max-width: 68ch;
  }
  .nl-promo-banner .nl-promo-cta {
    flex: 0 0 auto;
    display: inline-block; background: #6366f1; color: #ffffff;
    padding: 14px 30px; border-radius: var(--radius-sm, 6px);
    font-size: 16px; font-weight: 600; text-decoration: none;
    line-height: 1.2; transition: background 0.2s;
  }
  .nl-promo-banner .nl-promo-cta:hover { background: #4f46e5; color: #ffffff; }
}

@media (max-width: 640px) {
  .nl-promo-banner { padding: 22px 18px; margin: 34px 0 8px; gap: 16px; }
  .nl-promo-banner h2 { font-size: 20px; }
  .nl-promo-banner .nl-promo-body p { font-size: 15.5px; }
  .nl-promo-banner .nl-promo-cta { width: 100%; text-align: center; padding: 14px 20px; }
}


/* Publication nameplate above the issue meta line. Colour and weight carry
   the emphasis so the issue headline stays the largest thing on the page. */
.issue-nameplate{font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-.2px;color:#4f46e5;margin:0 0 10px;}
@media (max-width:640px){.issue-nameplate{font-size:16px;margin-bottom:8px;}}