/**
 * TLDR Africa — brand layer + dark theme for the Invent (subscriber) theme.
 *
 * main.css ships a fully token-driven palette, so the dark theme is mostly a
 * matter of re-pointing those tokens at a dark ramp. Everything above the
 * "Dark theme" heading is the brand skin that applies in both modes.
 */

/*--------------------------------------------------------------
# Brand tokens
--------------------------------------------------------------*/
:root {
  --tldr-gold: #c9914b;
  --tldr-gold-deep: #a8753a;
  --tldr-gold-soft: #e7c390;

  --accent-color: #c9914b;
  --nav-hover-color: #c9914b;
  --nav-dropdown-hover-color: #c9914b;

  /* Neutral scale the custom TLDR components lean on, so they follow the
     theme instead of hard-coding greys that break in dark mode. */
  --tldr-ink: #26262f;
  --tldr-ink-soft: #6b6b7b;
  --tldr-border: #ececf5;
  --tldr-border-strong: #d9d9e6;
  --tldr-raised: #ffffff;
  --tldr-sunken: #f6f7fb;
}

/*--------------------------------------------------------------
# Header & logo
--------------------------------------------------------------*/
.header {
  padding: 10px 0 !important;
  /* The topics marquee below is a stacking context at 998, and the theme
     leaves the header at 997 — which buried the Intelligence and About
     dropdowns under the scrolling pills. The header always sits on top. */
  z-index: 1000;
}

.site-logo {
  display: block;
  width: auto;
  height: 44px;
  max-width: 176px;
  object-fit: contain;
}

.site-logo-dark {
  display: none;
}

.site-logo-footer {
  height: 48px;
  max-width: 192px;
}

.sitename {
  background: linear-gradient(135deg, var(--tldr-gold) 0%, var(--tldr-gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
}

.btn-getstarted {
  background: linear-gradient(135deg, var(--tldr-gold) 0%, var(--tldr-gold-deep) 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(201, 145, 75, 0.3);
  white-space: nowrap;
}

.btn-getstarted:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201, 145, 75, 0.4);
  color: #ffffff !important;
}

.header .header-actions {
  flex: 0 0 auto;
}

/* These three live in the header row on desktop and inside the drawer below
   xl, so exactly one copy of each is visible at any width. */
.nav-drawer-only {
  display: none;
}

/* The theme orders the header row explicitly below 1200px — logo 1, CTA 2,
   nav 3. The hamburger used to sit inside the nav and travel with it; as a
   direct child of the row it falls back to order 0 and sorts ahead of the
   logo. Put it last and let auto margin hold it against the right edge.
   Matched to the theme's own breakpoint, since it exists to correct it. */
@media (max-width: 1200px) {
  .header .mobile-nav-toggle {
    order: 4;
    margin-left: auto;
    margin-right: 0;
  }
}

/* Below xl the header row is reduced to the logo and the hamburger, and the
   nav becomes a panel that slides in from the right.

   The theme animates this by flipping `display` on the list, which cannot
   transition, so the whole thing appeared instantly. Here the panel is always
   laid out and simply parked off-screen with a transform, which does. */
@media (max-width: 1199px) {
  .site-logo {
    height: 38px;
    max-width: 150px;
  }

  .header .header-actions {
    display: none !important;
  }

  /* Backdrop. `visibility` is delayed by the length of the slide on the way
     out, so the panel finishes animating before the overlay stops existing. */
  .navmenu {
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 0;
    background-color: rgba(18, 20, 26, 0);
    visibility: hidden;
    transition: background-color .38s ease, visibility 0s linear .38s;
  }

  .mobile-nav-active .navmenu {
    background-color: rgba(18, 20, 26, .55);
    visibility: visible;
    transition: background-color .38s ease, visibility 0s;
  }

  /* The panel itself. `inset` overrides the theme's 20px-inset card. */
  .navmenu > ul {
    display: block;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 340px);
    margin: 0;
    padding: 4.25rem 0 1.5rem;
    border-radius: 0;
    background-color: var(--nav-mobile-background-color);
    box-shadow: -10px 0 34px rgba(0, 0, 0, .22);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  }

  .mobile-nav-active .navmenu > ul {
    transform: translateX(0);
  }

  /* The header is a stacking context at z-index 997, so the topics bar at 998
     painted straight over the open drawer. Lift the whole header while it is
     open rather than fighting the bar's own z-index. */
  .mobile-nav-active .header {
    z-index: 10000;
  }

  /* Sits over the panel, so it takes the panel's ink rather than the theme's
     white — which would vanish against a light drawer. */
  .mobile-nav-active .mobile-nav-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    color: var(--nav-color);
    z-index: 2;
  }

  .mobile-nav-active .navmenu .nav-drawer-only {
    display: block;
  }

  .mobile-nav-active .navmenu .tldr-drawer-prefs {
    display: flex;
  }
}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  .navmenu,
  .navmenu > ul {
    transition: none;
  }
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn-primary,
.btn-success {
  background: linear-gradient(135deg, var(--tldr-gold) 0%, var(--tldr-gold-deep) 100%) !important;
  border: none !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover {
  filter: brightness(1.07);
  color: #fff !important;
}

.btn-outline-primary {
  border-color: var(--tldr-gold) !important;
  color: var(--tldr-gold) !important;
}

.btn-outline-primary:hover {
  background: var(--tldr-gold) !important;
  color: #fff !important;
}

/*--------------------------------------------------------------
# Category bar — topics marquee + pill search
--------------------------------------------------------------*/
.category-nav-wrapper {
  margin-top: 72px;
  background: var(--tldr-sunken);
  border-bottom: 1px solid var(--tldr-border);
  position: relative;
  z-index: 998;
}

@media (max-width: 1199px) {
  .category-nav-wrapper {
    margin-top: 64px;
  }
}

.tldr-topics-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-top: .6rem;
}

.tldr-topics-label {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tldr-ink-soft);
}

.tldr-topics-mask {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.tldr-topics-track {
  display: flex;
  gap: .4rem;
  width: max-content;
  animation: tldr-marquee 48s linear infinite;
}

.tldr-topics-mask:hover .tldr-topics-track,
.tldr-topics-track:focus-within {
  animation-play-state: paused;
}

@keyframes tldr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .tldr-topics-track { animation: none; }
  .tldr-topics-mask { overflow-x: auto; }
}

.tldr-topic-pill {
  flex: 0 0 auto;
  display: inline-block;
  padding: .3rem .7rem;
  border: 1px solid var(--tldr-border-strong);
  border-radius: 0;
  background: var(--tldr-raised);
  color: var(--tldr-ink);
  font-size: .74rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .18s ease;
}

.tldr-topic-pill:hover {
  border-color: var(--tldr-gold);
  color: var(--tldr-gold);
  transform: translateY(-1px);
}

.tldr-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .3rem .3rem .85rem;
  border: 1px solid var(--tldr-border-strong);
  border-radius: 0;
  background: var(--tldr-raised);
}

.tldr-search i {
  color: var(--tldr-ink-soft);
  font-size: .9rem;
}

.tldr-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tldr-ink);
  font-size: .85rem;
  padding: .3rem 0;
}

.tldr-search input::placeholder {
  color: var(--tldr-ink-soft);
}

.tldr-search button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  padding: .38rem 1.05rem;
  background: linear-gradient(135deg, var(--tldr-gold) 0%, var(--tldr-gold-deep) 100%);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
}

/*--------------------------------------------------------------
# Intelligence discovery strip
--------------------------------------------------------------*/
.intelligence-discovery {
  padding: .55rem 0 .7rem;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.intelligence-discovery__title,
.intelligence-discovery__link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .4rem;
  padding: .42rem .72rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 82%);
  background: var(--background-color);
  color: var(--default-color);
  font-size: .78rem;
  font-weight: 650;
  text-decoration: none;
}

.intelligence-discovery__title {
  border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
  color: var(--accent-color);
}

.intelligence-discovery__link:hover,
.intelligence-discovery__link.active {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

/*--------------------------------------------------------------
# Theme toggle & language selector
--------------------------------------------------------------*/
.tldr-theme-toggle {
  display: inline-flex;
  border: 1px solid var(--tldr-border-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--tldr-raised);
}

.tldr-theme-toggle button {
  border: 0;
  background: transparent;
  color: var(--tldr-ink-soft);
  padding: .28rem .5rem;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  transition: all .15s ease;
}

.tldr-theme-toggle button:hover {
  color: var(--tldr-gold);
}

.tldr-theme-toggle button.active {
  background: var(--tldr-gold);
  color: #fff;
}

.tldr-language {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.tldr-language select {
  max-width: 8.5rem;
  border: 1px solid var(--tldr-border-strong);
  border-radius: 999px;
  background: var(--tldr-raised);
  color: var(--tldr-ink);
  padding: .3rem 1.5rem .3rem .55rem;
  font-size: .78rem;
  color-scheme: light dark;
}

.tldr-language option {
  background: var(--tldr-raised);
  color: var(--tldr-ink);
}

/* Language + theme inside the mobile drawer. Visibility is handled by
   .nav-drawer-only; this is only the layout. */
.tldr-drawer-prefs {
  flex-direction: column;
  gap: .6rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--tldr-border);
  margin-bottom: .6rem;
}

.tldr-drawer-prefs > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.tldr-drawer-prefs span.tldr-drawer-pref-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tldr-ink-soft);
}

/* The subscribe CTA, carried into the drawer as the last item. */
.tldr-drawer-subscribe {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--tldr-border);
}

.navmenu .tldr-drawer-subscribe a {
  display: block;
  text-align: center;
  padding: .7rem 1rem !important;
  background: linear-gradient(135deg, var(--tldr-gold) 0%, var(--tldr-gold-deep) 100%);
  color: #fff !important;
  font-weight: 700;
}

/*--------------------------------------------------------------
# Cards & lists shared across the public pages
--------------------------------------------------------------*/
.tldr-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-color);
  border: 1px solid var(--tldr-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tldr-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tldr-gold), transparent 55%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

.tldr-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: var(--tldr-sunken);
}

.tldr-card__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem 1.1rem 1.15rem;
  flex: 1 1 auto;
}

.tldr-card__title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 700;
}

.tldr-card__title a {
  color: var(--heading-color);
  text-decoration: none;
}

.tldr-card__title a:hover {
  color: var(--tldr-gold);
}

.tldr-card__excerpt {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.tldr-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .35rem;
  font-size: .74rem;
  color: color-mix(in srgb, var(--default-color), transparent 38%);
}

.tldr-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--tldr-border-strong);
  background: var(--tldr-sunken);
  color: var(--tldr-ink-soft);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
}

a.tldr-chip:hover {
  border-color: var(--tldr-gold);
  color: var(--tldr-gold);
}

.tldr-chip--accent {
  border-color: color-mix(in srgb, var(--tldr-gold), transparent 55%);
  background: color-mix(in srgb, var(--tldr-gold), transparent 90%);
  color: var(--tldr-gold-deep);
}

/* A quiet panel used for sidebars, empty states and stat strips. */
.tldr-panel {
  background: var(--surface-color);
  border: 1px solid var(--tldr-border);
  border-radius: 12px;
  padding: 1.25rem;
}

.tldr-panel__title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: .9rem;
}

.tldr-stat {
  text-align: center;
  padding: 1.1rem .75rem;
}

.tldr-stat__value {
  font-family: var(--heading-font);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--heading-color);
}

.tldr-stat__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-top: .3rem;
}

.tldr-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.tldr-empty i {
  font-size: 2.4rem;
  display: block;
  margin-bottom: .6rem;
  opacity: .5;
}

/* Long-form article body */
.tldr-prose {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--default-color);
}

.tldr-prose h2,
.tldr-prose h3 {
  margin-top: 1.9rem;
  margin-bottom: .7rem;
  font-weight: 700;
}

.tldr-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1.2rem 0;
}

.tldr-prose blockquote {
  border-left: 3px solid var(--tldr-gold);
  padding-left: 1rem;
  margin: 1.4rem 0;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-style: italic;
}

.tldr-prose a {
  color: var(--tldr-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Table shell reused by the intelligence listings. */
.tldr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.tldr-table thead th {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--tldr-border-strong);
  white-space: nowrap;
}

.tldr-table tbody td {
  padding: .8rem;
  border-bottom: 1px solid var(--tldr-border);
  font-size: .88rem;
  vertical-align: middle;
}

.tldr-table tbody tr:hover td {
  background: var(--tldr-sunken);
}

/*--------------------------------------------------------------
# Subscribe popup
--------------------------------------------------------------*/
.subscribe-popup {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 500px;
  background: var(--surface-color);
  border: 1px solid var(--tldr-border);
  border-radius: 14px;
  padding: 18px 20px;
  z-index: 1045;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}

.subscribe-popup[hidden] {
  display: none;
}

.subscribe-popup.is-entering {
  transform: translateX(-50%) translateY(150%);
  opacity: 0;
}

.subscribe-popup .popup-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: transparent;
  color: var(--tldr-ink-soft);
  font-size: .8rem;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}

.subscribe-popup .popup-close:hover { color: var(--heading-color); }

.subscribe-popup .popup-body {
  display: flex;
  align-items: center;
  gap: 14px;
}

.subscribe-popup .popup-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  background: linear-gradient(135deg, var(--tldr-gold) 0%, var(--tldr-gold-deep) 100%);
}

.subscribe-popup .popup-text { flex-grow: 1; min-width: 0; }

.subscribe-popup .popup-title {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--heading-color);
}

.subscribe-popup .popup-desc {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.subscribe-popup .popup-cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--tldr-gold) 0%, var(--tldr-gold-deep) 100%);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  padding: 9px 16px;
  border-radius: 9px;
  text-decoration: none;
}

.subscribe-popup .popup-cta:hover { color: #fff; filter: brightness(1.08); }

@media (max-width: 430px) {
  .subscribe-popup .popup-body { flex-wrap: wrap; }
  .subscribe-popup .popup-cta { width: 100%; justify-content: center; padding: 10px; }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer { background-color: var(--background-color); color: var(--default-color); }

.footer-top { padding: 60px 0 30px; }

.footer-about p {
  margin-top: 12px;
  font-size: .92rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.7;
}

.footer-links h4 {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 14px;
}

.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links ul li { margin-bottom: 9px; }

.footer-links ul li a {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  text-decoration: none;
  font-size: .88rem;
  transition: color .15s;
}

.footer-links ul li a:hover { color: var(--accent-color); }

.footer .copyright {
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  font-size: .85rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.footer .credits { margin-top: 4px; font-size: .78rem; }

/*==============================================================
  Dark theme

  The Invent theme drives everything from six colour tokens, so the
  dark mode is largely a re-pointing of those tokens onto a warm-neutral
  dark ramp. The gold accent carries over unchanged — at 6.9:1 on the
  dark ground it stays comfortably readable — and only the components
  that hard-code a light surface need a specific override below.
==============================================================*/
html[data-theme="dark"] {
  --background-color: #101115;
  --default-color: #d6d7dd;
  --heading-color: #f3f4f7;
  --surface-color: #191b21;
  --contrast-color: #ffffff;
  --accent-color: #d9a45c;

  --nav-color: #c6c8d0;
  --nav-hover-color: #d9a45c;
  --nav-mobile-background-color: #16181d;
  --nav-dropdown-background-color: #1d1f26;
  --nav-dropdown-color: #c6c8d0;
  --nav-dropdown-hover-color: #d9a45c;

  --tldr-gold: #d9a45c;
  --tldr-gold-deep: #bd8640;
  --tldr-ink: #e4e5ea;
  --tldr-ink-soft: #9296a3;
  --tldr-border: #262931;
  --tldr-border-strong: #343842;
  --tldr-raised: #1d1f26;
  --tldr-sunken: #16181d;

  color-scheme: dark;
}

html[data-theme="dark"] body {
  background-color: var(--background-color);
  color: var(--default-color);
}

/* Preset classes bake in their own light values, so both need flipping. */
html[data-theme="dark"] .light-background {
  --background-color: #16181d;
  --surface-color: #1d1f26;
}

html[data-theme="dark"] .dark-background {
  --background-color: #0b0c0f;
  --surface-color: #191b21;
}

html[data-theme="dark"] .site-logo-light { display: none; }
html[data-theme="dark"] .site-logo-dark { display: block; }

html[data-theme="dark"] .header {
  background-color: color-mix(in srgb, #101115, transparent 8%);
  border-bottom: 1px solid var(--tldr-border);
}

html[data-theme="dark"] .header.scrolled {
  background-color: #101115;
  box-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] .category-nav-wrapper {
  background: var(--tldr-sunken);
  border-bottom-color: var(--tldr-border);
}

/* The gradient CTA already carries white text; drop the light-mode glow
   which reads as haze against a dark ground. */
html[data-theme="dark"] .btn-getstarted {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .tldr-card:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .tldr-chip--accent {
  color: var(--tldr-gold);
}

/* Bootstrap components inside the theme. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .accordion-item {
  background-color: var(--surface-color);
  border-color: var(--tldr-border);
  color: var(--default-color);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control {
  background-color: var(--tldr-raised);
  border-color: var(--tldr-border-strong);
  color: var(--default-color);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: var(--tldr-raised);
  border-color: var(--tldr-gold);
  color: var(--default-color);
  box-shadow: 0 0 0 .2rem rgba(217, 164, 92, .2);
}

html[data-theme="dark"] .form-control::placeholder { color: var(--tldr-ink-soft); }

html[data-theme="dark"] .table { --bs-table-color: var(--default-color); }

html[data-theme="dark"] .text-muted { color: var(--tldr-ink-soft) !important; }

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white {
  background-color: var(--tldr-sunken) !important;
  color: var(--default-color);
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
  border-color: var(--tldr-border) !important;
}

html[data-theme="dark"] .page-title nav {
  background-color: var(--tldr-sunken);
}

html[data-theme="dark"] .scroll-top {
  background-color: var(--tldr-gold);
}

/* The mobile drawer paints its own background in main.css. */
html[data-theme="dark"] .mobile-nav-active .navmenu > ul {
  background-color: var(--nav-mobile-background-color);
}

/*--------------------------------------------------------------
# Theme extensions used by the page templates

The Invent theme covers .hero, .about, .services and .section-title;
these are the few extra pieces the TLDR pages lean on, written against
the same tokens so they follow light and dark automatically.
--------------------------------------------------------------*/
.service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-color);
  border: 1px solid var(--tldr-border);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent-color), transparent 55%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .09);
}

.service-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}

.service-card h3 a { color: var(--heading-color); text-decoration: none; }
.service-card h3 a:hover { color: var(--accent-color); }

.service-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: .75rem;
}

.service-icon i { color: var(--accent-color); }

.section-summary { color: color-mix(in srgb, var(--default-color), transparent 22%); }

.hover-img-link img { transition: transform .35s ease; }
.hover-img-link { display: block; overflow: hidden; border-radius: 1rem; }
.hover-img-link:hover img { transform: scale(1.04); }

.stat-tile {
  background: var(--surface-color);
  border: 1px solid var(--tldr-border);
  border-radius: 1rem;
  padding: 1.2rem 1rem;
  text-align: center;
  height: 100%;
}

.stat-tile__value {
  font-family: var(--heading-font);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--heading-color);
}

.stat-tile__label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-top: .25rem;
}

.rank-row {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  background: var(--surface-color);
  border: 1px solid var(--tldr-border);
  border-radius: .85rem;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

.rank-row:hover { border-color: var(--accent-color); transform: translateY(-2px); }

.rank-row__num {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-color);
  opacity: .45;
  min-width: 2rem;
}

.rank-row__title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--heading-color);
  margin: 0 0 .15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rank-row__sub {
  font-size: .8rem;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.country-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--tldr-border-strong);
  background: var(--surface-color);
  font-size: .84rem;
  font-weight: 600;
}

.article-card__source {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.article-card__more,
.article-card__cta {
  color: var(--accent-color);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.article-card__more { font-size: .85rem; margin-left: 4px; }
.article-card__cta { font-size: .82rem; }
.article-card__more:hover,
.article-card__cta:hover { text-decoration: underline; }

.list-divided > * + * { border-top: 1px solid var(--tldr-border); }

/* Detail pages: a definition grid for structured facts. */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }

.fact {
  background: var(--tldr-sunken);
  border: 1px solid var(--tldr-border);
  border-radius: .75rem;
  padding: .85rem 1rem;
}

.fact dt {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  margin-bottom: .2rem;
}

.fact dd { margin: 0; font-weight: 600; color: var(--heading-color); }

/* ── Partners ──────────────────────────────────────────────────────────
   Logos arrive at wildly different aspect ratios, so the logo well is a
   fixed-height flex box and the image is contained inside it. That keeps
   the grid even whether a partner supplies a wordmark or a square badge. */
.tldr-partner-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--tldr-raised);
  border: 1px solid var(--tldr-border);
  border-radius: 0;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tldr-partner-card:hover {
  border-color: var(--tldr-gold);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .07);
  transform: translateY(-2px);
}

.tldr-partner-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 72px;
  margin-bottom: 1.1rem;
}

.tldr-partner-logo img {
  max-height: 72px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.tldr-partner-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--tldr-gold-deep);
  background: var(--tldr-sunken);
  border: 1px solid var(--tldr-border-strong);
}

.tldr-partner-name {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tldr-ink);
}

.tldr-partner-description {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--tldr-ink-soft);
}

/* Pushed to the card foot so links line up across a row of uneven cards. */
.tldr-partner-link {
  margin-top: auto;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tldr-gold-deep);
  text-decoration: none;
}

.tldr-partner-link:hover {
  color: var(--tldr-gold);
  text-decoration: underline;
}

.tldr-partner-link i {
  font-size: .8em;
}

@media (prefers-reduced-motion: reduce) {
  .tldr-partner-card { transition: none; }
  .tldr-partner-card:hover { transform: none; }
}

/*--------------------------------------------------------------
# Intelligence section
#
# The Vue build carried these styles in scoped component blocks, which did
# not survive the move to Blade — the filter rail, the entity cards and the
# fact/tag vocabulary were all rendering unstyled. This is the whole system,
# built on the same tokens and the same card language as the landing page.
--------------------------------------------------------------*/

/* ── Page shell: filter rail + results ──────────────────────────────── */
.intel-wrap {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .intel-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

/* Sticky so the filters stay reachable however far the results run.
   The offset clears the fixed header plus the topics rail beneath it. */
.intel-sidebar {
  position: sticky;
  top: 150px;
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 991.98px) {
  .intel-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.intel-content {
  min-width: 0;   /* lets wide tables scroll instead of blowing out the grid */
}

/* ── The filter panel ───────────────────────────────────────────────── */
.intel-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface-color, var(--tldr-raised));
  border: 1px solid var(--tldr-border);
  border-radius: 12px;
  overflow: hidden;
}

.intel-panel-head {
  padding: .85rem 1rem;
  font-size: .95rem;
  color: var(--heading-color, var(--tldr-ink));
  background: var(--tldr-sunken);
  border-bottom: 1px solid var(--tldr-border);
}

.intel-panel-body {
  padding: .25rem 1rem 1rem;
}

.intel-panel-foot {
  padding: .85rem 1rem;
  border-top: 1px solid var(--tldr-border);
  background: var(--tldr-sunken);
}

.filter-group {
  padding: .9rem 0;
  border-bottom: 1px solid var(--tldr-border);
}

.filter-group:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.filter-label {
  display: block;
  margin-bottom: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tldr-ink-soft);
}

.filter-sublabel {
  display: block;
  margin-bottom: .2rem;
  font-size: .72rem;
  color: var(--tldr-ink-soft);
}

.intel-sidebar .form-control,
.intel-sidebar .form-select {
  font-size: .88rem;
  border-radius: 8px;
  border-color: var(--tldr-border-strong);
  background: var(--tldr-raised);
  color: var(--tldr-ink);
}

.intel-sidebar .form-control:focus {
  border-color: var(--tldr-gold);
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--tldr-gold), transparent 80%);
}

/* A long country or sector list scrolls inside the group rather than
   pushing every other filter off the screen. */
.check-scroll {
  max-height: 13.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .35rem;
}

.check-scroll::-webkit-scrollbar {
  width: 6px;
}

.check-scroll::-webkit-scrollbar-thumb {
  background: var(--tldr-border-strong);
  border-radius: 3px;
}

.intel-sidebar .form-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 0;
  margin: 0;
  padding: .28rem .35rem;
  border-radius: 6px;
}

.intel-sidebar .form-check:hover {
  background: var(--tldr-sunken);
}

.intel-sidebar .form-check-input {
  flex: none;
  margin: 0;
  float: none;
  border-color: var(--tldr-border-strong);
}

.intel-sidebar .form-check-input:checked {
  background-color: var(--tldr-gold);
  border-color: var(--tldr-gold);
}

.intel-sidebar .form-check-label {
  flex: 1;
  min-width: 0;
  font-size: .86rem;
  line-height: 1.3;
  color: var(--tldr-ink);
  cursor: pointer;
}

/* An option with nothing behind it stays selectable but reads as empty. */
.intel-sidebar .form-check.is-empty .form-check-label,
.intel-sidebar .form-check.is-empty .intel-opt-count {
  opacity: .45;
}

.intel-opt-count {
  flex: none;
  font-size: .72rem;
  font-weight: 700;
  color: var(--tldr-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ── Toolbar above the results ──────────────────────────────────────── */
.intel-toolbar {
  margin-bottom: 1.1rem;
}

.intel-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--tldr-border);
}

.intel-toolbar-summary {
  font-size: .9rem;
  font-weight: 600;
  color: var(--tldr-ink-soft);
}

.intel-toolbar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

.intel-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .75rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--tldr-ink-soft);
  background: var(--surface-color, var(--tldr-raised));
  border: 1px solid var(--tldr-border-strong);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.intel-toolbar-btn:hover {
  color: var(--tldr-ink);
  border-color: var(--tldr-gold);
}

/* Same reasoning as the gate buttons: white needs the deepened gold. */
.intel-toolbar-btn.is-active {
  color: #fff;
  background: #996e39;
  border-color: #996e39;
}

.intel-viewswitch,
.intel-density {
  display: inline-flex;
}

.intel-viewswitch .intel-toolbar-btn:first-child,
.intel-density .intel-toolbar-btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.intel-viewswitch .intel-toolbar-btn:last-child,
.intel-density .intel-toolbar-btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.intel-toolbar-count {
  min-width: 1.2rem;
  padding: 0 .3rem;
  font-size: .7rem;
  line-height: 1.2rem;
  text-align: center;
  color: #fff;
  background: #996e39;
  border-radius: 999px;
}

/* ── Applied-filter chips ───────────────────────────────────────────── */
.intel-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding-top: .8rem;
}

.intel-chips-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tldr-ink-soft);
}

.intel-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .55rem;
  font-size: .8rem;
  color: var(--tldr-ink);
  background: var(--tldr-sunken);
  border: 1px solid var(--tldr-border-strong);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.intel-chip:hover {
  color: var(--tldr-ink);
  border-color: var(--tldr-gold);
}

.intel-chip-key {
  font-weight: 700;
  color: var(--tldr-ink-soft);
}

.intel-chip i {
  font-size: .9em;
  opacity: .55;
}

.intel-chip:hover i {
  opacity: 1;
}

.intel-chip-clear {
  font-size: .8rem;
  font-weight: 600;
  color: var(--tldr-gold-deep);
  text-decoration: underline;
}

/* ── Saved views menu ───────────────────────────────────────────────── */
.intel-saved-menu {
  min-width: 22rem;
  max-width: 26rem;
  padding: .5rem;
  border-radius: 12px;
  border-color: var(--tldr-border-strong);
  background: var(--surface-color, var(--tldr-raised));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}

.intel-saved-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .45rem .5rem;
  border-radius: 8px;
}

.intel-saved-item:hover {
  background: var(--tldr-sunken);
}

.intel-saved-link {
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

.intel-saved-name {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tldr-ink);
}

.intel-saved-summary {
  display: block;
  font-size: .78rem;
  color: var(--tldr-ink-soft);
}

.intel-saved-delete {
  flex: none;
  padding: .15rem .3rem;
  font-size: .75rem;
  color: var(--tldr-ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
}

.intel-saved-delete:hover {
  color: #dc3545;
}

.intel-saved-empty {
  margin: 0;
  padding: .5rem;
  font-size: .84rem;
  color: var(--tldr-ink-soft);
}

.intel-saved-form {
  margin-top: .35rem;
  padding-top: .6rem;
  border-top: 1px solid var(--tldr-border);
}

/* ── Column chooser ─────────────────────────────────────────────────── */
.intel-columns-menu {
  min-width: 15rem;
  padding: .5rem;
  border-radius: 12px;
  border-color: var(--tldr-border-strong);
  background: var(--surface-color, var(--tldr-raised));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}

.intel-columns-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .32rem .4rem;
  font-size: .88rem;
  color: var(--tldr-ink);
  border-radius: 6px;
  cursor: pointer;
}

.intel-columns-item:hover {
  background: var(--tldr-sunken);
}

.intel-columns-reset {
  width: 100%;
  margin-top: .4rem;
  padding-top: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--tldr-gold-deep);
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--tldr-border);
  cursor: pointer;
}

/* ── The results table ──────────────────────────────────────────────── */
.intel-table-wrap {
  position: relative;
  /* Scrolls in both directions: sideways for wide column sets, and
     vertically against a viewport-relative cap so the header stays in
     view while a long page of results runs under it. */
  max-height: min(72vh, 900px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface-color, var(--tldr-raised));
  border: 1px solid var(--tldr-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.intel-table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.intel-table-wrap::-webkit-scrollbar-thumb {
  background: var(--tldr-border-strong);
  border-radius: 5px;
}

.intel-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--tldr-ink-soft);
}

.intel-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9rem;
}

.intel-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: .8rem .9rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: left;
  color: var(--tldr-ink-soft);
  background: var(--tldr-sunken);
  border-bottom: 1px solid var(--tldr-border-strong);
}

.intel-table thead th.text-end {
  text-align: right;
}

.intel-table tbody td {
  padding: .85rem .9rem;
  vertical-align: top;
  line-height: 1.45;
  color: var(--tldr-ink);
  background: var(--surface-color, var(--tldr-raised));
  border-bottom: 1px solid var(--tldr-border);
  transition: background .12s ease;
}

.intel-table tbody tr:last-child td {
  border-bottom: 0;
}

.intel-table tbody tr {
  cursor: pointer;
}

.intel-table tbody tr:hover td {
  background: color-mix(in srgb, var(--tldr-gold), transparent 94%);
}

/* A gold spine on hover marks the active row without moving anything. */
.intel-table tbody tr:hover .intel-col-primary {
  box-shadow: inset 3px 0 0 var(--tldr-gold);
}

/* The lead column stays put while the rest scrolls sideways, so a row is
   always identifiable — the affordance that matters most on a wide table. */
.intel-col-primary {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 14rem;
}

.intel-table thead .intel-col-primary {
  z-index: 4;
}

.intel-cell-link {
  font-weight: 600;
  color: var(--heading-color, var(--tldr-ink));
  text-decoration: none;
}

.intel-cell-link:hover {
  color: var(--tldr-gold-deep);
  text-decoration: underline;
}

.intel-cell-sub {
  display: block;
  margin-top: .15rem;
  font-size: .79rem;
  color: var(--tldr-ink-soft);
}

.intel-cell-empty {
  color: var(--tldr-ink-soft);
  opacity: .5;
}

.intel-cell-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
}

/* Figures line up column-wise when they are tabular. */
.intel-table td.text-end {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Compact density: same information, less air. */
.intel-table-wrap.is-compact .intel-table tbody td,
.intel-table-wrap.is-compact .intel-table thead th {
  padding: .45rem .7rem;
}

.intel-table-wrap.is-compact .intel-cell-sub {
  display: none;
}

/* Below md the table restacks into labelled rows rather than scrolling
   sideways forever. */
@media (max-width: 767.98px) {
  .intel-table-wrap {
    max-height: none;
    overflow: visible;
  }

  .intel-table thead {
    display: none;
  }

  .intel-table,
  .intel-table tbody,
  .intel-table tr,
  .intel-table td {
    display: block;
    width: 100%;
  }

  .intel-table tbody tr {
    padding: .6rem .3rem;
    border-bottom: 1px solid var(--tldr-border-strong);
  }

  .intel-table tbody td {
    display: flex;
    gap: .75rem;
    padding: .28rem .6rem;
    border: 0;
  }

  .intel-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 8rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tldr-ink-soft);
  }

  .intel-col-primary {
    position: static;
    min-width: 0;
  }

  .intel-table tbody td.intel-col-primary::before {
    display: none;
  }

  .intel-table tbody td.intel-col-primary {
    font-size: 1rem;
    padding-bottom: .5rem;
  }
}

/* ── Entity cards ───────────────────────────────────────────────────── */

/* Same language as the landing-page article card — raised surface, soft
   border, lift and gold edge on hover — with the extra structure an
   intelligence record needs. */
.intel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: 100%;
  padding: 1.15rem 1.25rem 1.05rem;
  background: var(--surface-color, var(--tldr-raised));
  border: 1px solid var(--tldr-border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.intel-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tldr-gold), transparent 55%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .1);
}

/* A tone stripe down the left edge, so funding / regulatory / tender read
   apart at a glance in a mixed feed. */
.intel-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 12px 0 0 12px;
  background: var(--tone-solid);
}

/* Whole-card hit area; every real link sits above it. */
.intel-card-hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 12px;
}

.intel-card > *:not(.intel-card-hit) {
  position: relative;
  z-index: 1;
}

.intel-card-top,
.intel-card-head {
  min-width: 0;
}

.intel-card-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--heading-color, var(--tldr-ink));
}

.intel-card-title a {
  color: inherit;
  text-decoration: none;
}

.intel-card-title a:hover {
  color: var(--tldr-gold-deep);
}

.intel-card-subtitle {
  margin: .2rem 0 0;
  font-size: .86rem;
  color: var(--tldr-ink-soft);
}

.intel-card-summary {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--tldr-ink-soft);
}

/* The facts grid is the point of the card — the numbers a reader came for,
   on a sunken panel so they read as data rather than prose. */
.intel-card-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--tldr-border);
  border: 1px solid var(--tldr-border);
  border-radius: 10px;
  overflow: hidden;
}

.intel-card-fact {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .6rem .7rem;
  background: var(--tldr-sunken);
}

.intel-card-fact-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tldr-ink-soft);
}

.intel-card-fact-value {
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--heading-color, var(--tldr-ink));
  font-variant-numeric: tabular-nums;
}

.intel-card-fact-sub {
  font-size: .74rem;
  color: var(--tldr-ink-soft);
}

/* A toned figure takes the tone's ink; the fact tiles sit on --tldr-sunken,
   where every ink in the palette clears AA. */
.intel-card-fact.intel-tone-positive,
.intel-card-fact.intel-tone-critical,
.intel-card-fact.intel-tone-warning,
.intel-card-fact.intel-tone-info,
.intel-card-fact.intel-tone-accent {
  --tone-ink: inherit;
}

.intel-card-fact.intel-tone-positive .intel-card-fact-value { color: #0f6b37; }
.intel-card-fact.intel-tone-critical .intel-card-fact-value { color: #a3182a; }
.intel-card-fact.intel-tone-warning  .intel-card-fact-value { color: #7d5209; }
.intel-card-fact.intel-tone-info     .intel-card-fact-value { color: #1a5c7d; }

.intel-card-actions {
  display: flex;
  gap: .5rem;
}

.intel-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px solid var(--tldr-border);
}

.intel-card-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.intel-card-date {
  font-size: .78rem;
  color: var(--tldr-ink-soft);
}

/* ── Tags and tones ─────────────────────────────────────────────────────
   One palette, four uses: the pill itself, the card's left stripe, a fact's
   left border and the tone strip. Each tone declares an ink, a tint and a
   solid accent, so a tone can never be half-applied.

   Pills are tinted rather than solid — soft background, strong same-hue ink.
   Solid pills with white labels sat between 2.9:1 and 4.5:1 depending on the
   tone and theme; every pair below clears 5.3:1. */
.intel-tag,
.intel-fact,
.intel-card,
.intel-tonebar-seg {
  --tone-ink: #4a4a5a;
  --tone-tint: #eceef4;
  --tone-solid: #8b8b9c;
}

.intel-tone-positive { --tone-ink: #0f6b37; --tone-tint: #e4f5ea; --tone-solid: #1f9e59; }
.intel-tone-warning  { --tone-ink: #7d5209; --tone-tint: #fbf1de; --tone-solid: #e0a020; }
.intel-tone-critical { --tone-ink: #a3182a; --tone-tint: #fbe9eb; --tone-solid: #d93144; }
.intel-tone-info     { --tone-ink: #1a5c7d; --tone-tint: #e4f1f8; --tone-solid: #3d92c2; }
.intel-tone-accent   { --tone-ink: #7d5a2c; --tone-tint: #f6ecdd; --tone-solid: var(--tldr-gold); }
.intel-tone-neutral  { --tone-ink: #4a4a5a; --tone-tint: #eceef4; --tone-solid: #8b8b9c; }

.intel-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  font-size: .73rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--tone-ink);
  background: var(--tone-tint);
}

.intel-tag i {
  font-size: .9em;
  opacity: .85;
}

.intel-tag-sub {
  font-weight: 600;
  opacity: .8;
}

/* Plain and topic tags are labels, not claims, so they never take a tone
   tint. Scoped with :not() rather than relying on source order — a tone
   class is two selectors deep and would otherwise win on specificity, which
   is exactly how these ended up as near-black text on dark grey. */
.intel-tag.intel-tag-plain:not(.intel-tag-topic) {
  color: var(--tldr-ink);
  background: transparent;
  border-color: var(--tldr-border-strong);
  font-weight: 600;
  text-transform: capitalize;
}

.intel-tag.intel-tag-topic {
  color: var(--tldr-ink-soft);
  background: var(--tldr-sunken);
  border-color: var(--tldr-border);
  font-weight: 600;
  text-transform: capitalize;
}

/* ── Standalone facts (detail pages, key-facts strip) ───────────────── */
.intel-key-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .75rem;
}

.intel-fact {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem .95rem;
  background: var(--surface-color, var(--tldr-raised));
  border: 1px solid var(--tldr-border);
  border-left: 3px solid var(--tone-solid);
  border-radius: 10px;
}


.intel-fact-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tldr-ink-soft);
}

.intel-fact-value {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading-color, var(--tldr-ink));
  font-variant-numeric: tabular-nums;
}

.intel-fact-value a {
  color: inherit;
  text-decoration: none;
}

.intel-fact-value a:hover {
  color: var(--tldr-gold-deep);
  text-decoration: underline;
}

.intel-fact-sub {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--tldr-ink-soft);
}

/* ── Content blocks on detail pages ─────────────────────────────────── */
.intel-block {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: var(--surface-color, var(--tldr-raised));
  border: 1px solid var(--tldr-border);
  border-radius: 12px;
}

.intel-block-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .9rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading-color, var(--tldr-ink));
}

.intel-block-title i {
  color: var(--tldr-gold-deep);
}

.intel-block-note {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--tldr-ink-soft);
}

/* ── Mentions ───────────────────────────────────────────────────────── */
.intel-mention-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.intel-mention-item {
  padding: .7rem 0;
  border-bottom: 1px solid var(--tldr-border);
}

.intel-mention-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.intel-mention-link {
  display: block;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--heading-color, var(--tldr-ink));
  text-decoration: none;
}

.intel-mention-link:hover {
  color: var(--tldr-gold-deep);
  text-decoration: underline;
}

.intel-mention-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: .25rem;
  font-size: .78rem;
  color: var(--tldr-ink-soft);
}

/* ── Identity header ────────────────────────────────────────────────── */
.intel-identity {
  margin-bottom: 1.25rem;
}

.intel-identity-name {
  margin: .2rem 0 .35rem;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--heading-color, var(--tldr-ink));
}

.intel-identity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--tldr-ink-soft);
}

.intel-identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}

.intel-preview-kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tldr-gold-deep);
}

/* ── Small pieces ───────────────────────────────────────────────────── */
.intel-action {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .8rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--tldr-ink);
  background: var(--surface-color, var(--tldr-raised));
  border: 1px solid var(--tldr-border-strong);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}

.intel-action:hover {
  color: var(--tldr-gold-deep);
  border-color: var(--tldr-gold);
}

.intel-empty {
  padding: 2.5rem 1.25rem;
  font-size: .93rem;
  text-align: center;
  color: var(--tldr-ink-soft);
  background: var(--tldr-sunken);
  border: 1px dashed var(--tldr-border-strong);
  border-radius: 12px;
}

.intel-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--tldr-gold-deep);
  background: none;
  border: 0;
  cursor: pointer;
}

.intel-expand-toggle i {
  transition: transform .2s ease;
}

.intel-expand-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Both labels stay in the DOM and swap by class, so Google Translate is
   never left holding a replaced text node. */
.intel-expand-toggle .intel-label-expanded,
.intel-expand-toggle[aria-expanded="true"] .intel-label-collapsed {
  display: none;
}

.intel-expand-toggle[aria-expanded="true"] .intel-label-expanded {
  display: inline;
}

.intel-expand-body {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--tldr-border);
  font-size: .86rem;
  color: var(--tldr-ink-soft);
}

/* Mention sparkline */
.intel-spark {
  display: block;
  width: 68px;
  height: 22px;
  margin-left: auto;
  overflow: visible;
}

.intel-spark-line {
  fill: none;
  stroke: var(--tldr-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intel-spark-area {
  fill: color-mix(in srgb, var(--tldr-gold), transparent 85%);
  stroke: none;
}

.intel-spark-dot {
  fill: var(--tldr-gold-deep);
}

/* Tone strip */
.intel-tonebar {
  display: flex;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tldr-border);
}

.intel-tonebar-seg { background: var(--tone-solid); }

/* Story list */
.intel-story {
  margin: 0;
  padding: 0;
  list-style: none;
}

.intel-story-item {
  display: flex;
  gap: .65rem;
  padding: .55rem 0;
}

.intel-story-dot {
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-top: .45rem;
  border-radius: 50%;
  background: var(--tldr-gold);
}

.intel-story-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--heading-color, var(--tldr-ink));
  text-decoration: none;
}

.intel-story-title:hover {
  color: var(--tldr-gold-deep);
}

.intel-story-desc,
.intel-story-meta {
  font-size: .8rem;
  color: var(--tldr-ink-soft);
}

/* ── Row preview drawer ─────────────────────────────────────────────── */
.intel-peek {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  width: min(31rem, 100vw);
  height: 100vh;
  background: var(--surface-color, var(--tldr-raised));
  border-left: 1px solid var(--tldr-border-strong);
  box-shadow: -18px 0 44px rgba(0, 0, 0, .18);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.intel-peek.is-open {
  transform: translateX(0);
}

.intel-peek-scrim {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(12, 12, 18, .42);
  opacity: 0;
  transition: opacity .3s ease;
}

.intel-peek-scrim.is-open {
  opacity: 1;
}

body.intel-peek-open {
  overflow: hidden;
}

.intel-peek-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--tldr-border);
}

.intel-peek-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--heading-color, var(--tldr-ink));
}

.intel-peek-subtitle {
  margin: .2rem 0 0;
  font-size: .88rem;
  color: var(--tldr-ink-soft);
}

.intel-peek-close {
  margin-left: auto;
  padding: .25rem .4rem;
  font-size: .95rem;
  color: var(--tldr-ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
}

.intel-peek-close:hover {
  color: var(--tldr-ink);
}

.intel-peek-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.intel-peek-blurb {
  margin: 0 0 1rem;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--tldr-ink-soft);
}

.intel-peek-facts {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.intel-peek-fact {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: .3rem .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--tldr-border);
}

.intel-peek-fact-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tldr-ink-soft);
}

.intel-peek-fact-value {
  font-size: .93rem;
  font-weight: 600;
  color: var(--heading-color, var(--tldr-ink));
}

.intel-peek-fact-sub {
  grid-column: 2;
  font-size: .8rem;
  color: var(--tldr-ink-soft);
}

.intel-peek-heading {
  margin: 0 0 .6rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tldr-ink-soft);
}

.intel-peek-mentions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.intel-peek-mentions li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--tldr-border);
}

.intel-peek-mentions a {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--heading-color, var(--tldr-ink));
  text-decoration: none;
}

.intel-peek-mentions a:hover {
  color: var(--tldr-gold-deep);
  text-decoration: underline;
}

.intel-peek-mention-meta {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  color: var(--tldr-ink-soft);
}

.intel-peek-loading,
.intel-peek-error {
  padding: 1rem 0;
  font-size: .9rem;
  color: var(--tldr-ink-soft);
}

.intel-peek-foot {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--tldr-border);
}

.intel-peek-open {
  font-size: .9rem;
  font-weight: 700;
  color: var(--tldr-gold-deep);
  text-decoration: none;
}

.intel-peek-open:hover {
  text-decoration: underline;
}

/* ── The subscriber gate ────────────────────────────────────────────── */

/* Sits directly under the teaser rows and fades up out of them, so it reads
   as "the list continues behind this" rather than as a separate section. */
.intel-gate {
  position: relative;
  margin-top: -2rem;
  padding: 4.5rem 1.5rem 2.5rem;
  text-align: center;
  background: linear-gradient(to bottom, transparent, var(--tldr-sunken) 20%);
  border-radius: 12px;
}

.intel-gate-inner {
  max-width: 34rem;
  margin: 0 auto;
}

.intel-gate-icon {
  font-size: 1.6rem;
  color: var(--tldr-gold-deep);
}

.intel-gate-title {
  margin: .75rem 0 .5rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--heading-color, var(--tldr-ink));
}

.intel-gate-lead {
  margin: 0 0 1.25rem;
  font-size: .96rem;
  line-height: 1.7;
  color: var(--tldr-ink-soft);
}

.intel-gate-points {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: 0;
  text-align: left;
  list-style: none;
}

.intel-gate-points li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .25rem 0;
  font-size: .92rem;
  color: var(--tldr-ink);
}

.intel-gate-points i {
  margin-top: .2rem;
  color: var(--tldr-gold-deep);
}

/* White label in both themes, as asked. The brand gold is too light to carry
   white — #c9914b gives 2.75:1 — so these buttons use a deepened gold of the
   same hue that clears AA (4.5:1), and darken further on hover rather than
   lightening, which would drop back under. */
.intel-gate-cta,
.intel-gate-submit {
  color: #fff;
  background: #996e39;
  border: 0;
  font-weight: 700;
  transition: background .15s ease;
}

.intel-gate-cta {
  display: inline-block;
  padding: .8rem 2rem;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
}

.intel-gate-submit {
  padding: .7rem 1rem;
  border-radius: 10px;
}

.intel-gate-cta:hover,
.intel-gate-submit:hover,
.intel-gate-cta:focus,
.intel-gate-submit:focus {
  color: #fff;
  background: #7d5a2c;   /* 6.2:1 */
}

.intel-gate-alt {
  margin: 1rem 0 0;
  font-size: .9rem;
  color: var(--tldr-ink-soft);
}

.intel-gate-link {
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  color: var(--tldr-gold-deep);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.intel-gate-modal {
  border-radius: 14px;
  background: var(--surface-color, var(--tldr-raised));
  color: var(--tldr-ink);
  border: 1px solid var(--tldr-border);
}

.intel-gate-modal .modal-header,
.intel-gate-modal .modal-body {
  border-color: var(--tldr-border);
}

.intel-gate-tabs {
  border-bottom-color: var(--tldr-border);
}

.intel-gate-tabs .nav-link {
  border-radius: 8px 8px 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tldr-ink-soft);
  border-color: transparent;
}

.intel-gate-tabs .nav-link:hover {
  color: var(--tldr-ink);
  border-color: transparent;
}

.intel-gate-tabs .nav-link.active {
  color: var(--tldr-ink);
  background: var(--surface-color, var(--tldr-raised));
  border-color: var(--tldr-border) var(--tldr-border) transparent;
}

.intel-gate-fineprint {
  margin: .75rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--tldr-ink-soft);
}

/* Off-screen rather than display:none — a bot reading the DOM should still
   find something worth filling in. */
.tldr-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.intel-signed-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .5rem .8rem;
  font-size: .84rem;
  color: var(--tldr-ink-soft);
  background: var(--tldr-sunken);
  border: 1px solid var(--tldr-border);
  border-radius: 8px;
}

.intel-signed-in form {
  margin-left: auto;
}

.intel-signed-out-btn {
  padding: 0;
  font-size: .84rem;
  font-weight: 600;
  color: var(--tldr-gold-deep);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .intel-peek,
  .intel-peek-scrim,
  .intel-card,
  .intel-table tbody td {
    transition: none;
  }

  .intel-card:hover {
    transform: none;
  }
}

/* ── Dark theme adjustments ─────────────────────────────────────────── */

/* The tone palette inverts for dark surfaces: the ink brightens, the tint
   becomes a translucent wash of the same hue over whatever it sits on, and
   the solid accent lifts so a 3px stripe still reads. Every pair below was
   measured flattened onto the dark card and clears 5.6:1. */
html[data-theme="dark"] .intel-tag,
html[data-theme="dark"] .intel-fact,
html[data-theme="dark"] .intel-card,
html[data-theme="dark"] .intel-tonebar-seg {
  --tone-ink: #c3c7d2;
  --tone-tint: rgba(255, 255, 255, .10);
  --tone-solid: #6f7382;
}

html[data-theme="dark"] .intel-tone-positive {
  --tone-ink: #5fe08f; --tone-tint: rgba(74, 222, 128, .16); --tone-solid: #34c471;
}
html[data-theme="dark"] .intel-tone-warning {
  --tone-ink: #fbbf24; --tone-tint: rgba(251, 191, 36, .16); --tone-solid: #e0a020;
}
html[data-theme="dark"] .intel-tone-critical {
  --tone-ink: #fb8a8a; --tone-tint: rgba(248, 113, 113, .16); --tone-solid: #e2555f;
}
html[data-theme="dark"] .intel-tone-info {
  --tone-ink: #7ab8f5; --tone-tint: rgba(96, 165, 250, .16); --tone-solid: #4f9be0;
}
html[data-theme="dark"] .intel-tone-accent {
  --tone-ink: #e0b273; --tone-tint: rgba(217, 164, 92, .16); --tone-solid: var(--tldr-gold);
}
html[data-theme="dark"] .intel-tone-neutral {
  --tone-ink: #c3c7d2; --tone-tint: rgba(255, 255, 255, .10); --tone-solid: #6f7382;
}

html[data-theme="dark"] .intel-card-fact.intel-tone-positive .intel-card-fact-value { color: #5fe08f; }
html[data-theme="dark"] .intel-card-fact.intel-tone-critical .intel-card-fact-value { color: #fb8a8a; }
html[data-theme="dark"] .intel-card-fact.intel-tone-warning  .intel-card-fact-value { color: #fbbf24; }
html[data-theme="dark"] .intel-card-fact.intel-tone-info     .intel-card-fact-value { color: #7ab8f5; }

html[data-theme="dark"] .intel-card,
html[data-theme="dark"] .intel-table-wrap {
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .intel-card:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .intel-saved-menu,
html[data-theme="dark"] .intel-columns-menu {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

/* ── Pieces the first pass named wrongly or missed ───────────────────── */

/* The key-facts strip. The component emits .intel-facts, not
   .intel-key-facts — this is the class that actually ships. */
.intel-facts,
.intel-key-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.intel-facts-compact {
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .5rem;
}

.intel-facts-compact .intel-fact {
  padding: .6rem .7rem;
}

.intel-facts-compact .intel-fact-value {
  font-size: .95rem;
}

/* Identity header: avatar, name block, blurb */
.intel-identity-main {
  min-width: 0;
  flex: 1;
}

.intel-identity-blurb {
  margin: .6rem 0 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--tldr-ink-soft);
}

.intel-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--tldr-gold-deep);
  background: var(--tldr-sunken);
  border: 1px solid var(--tldr-border-strong);
  border-radius: 12px;
}

.intel-avatar-round {
  border-radius: 50%;
}

.intel-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Block header row: title on the left, count/actions on the right */
.intel-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .9rem;
}

.intel-block-head .intel-block-title {
  margin-bottom: 0;
}

/* Sourced mention excerpt */
.intel-mention-excerpt {
  margin: .3rem 0 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--tldr-ink-soft);
}

/* Sparkline wrapper inside a card foot */
.intel-card-spark {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.intel-peek-mentions-wrap {
  margin-top: .5rem;
}

.intel-chip-value {
  font-weight: 600;
}

/* A tone class with no tone resolves to neutral rather than to nothing. */
.intel-tone- {
  --tone-ink: #4a4a5a;
  --tone-tint: #eceef4;
  --tone-solid: #8b8b9c;
}

html[data-theme="dark"] .intel-tone- {
  --tone-ink: #c3c7d2;
  --tone-tint: rgba(255, 255, 255, .10);
  --tone-solid: #6f7382;
}

/* ── Become a partner ──────────────────────────────────────────────── */
.tldr-partner-cta {
  margin-top: 3rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--tldr-sunken);
  border: 1px solid var(--tldr-border);
}

.tldr-partner-cta-title {
  margin: 0 0 .6rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tldr-ink);
}

.tldr-partner-cta-text {
  max-width: 34rem;
  margin: 0 auto 1.25rem;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--tldr-ink-soft);
}

.tldr-partner-cta-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1.75rem;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  background: #996e39;      /* the AA-safe gold, as on the gate buttons */
  text-decoration: none;
  transition: background .15s ease;
}

.tldr-partner-cta-link:hover,
.tldr-partner-cta-link:focus {
  color: #fff;
  background: #7d5a2c;
}

.tldr-partner-cta-link i {
  font-size: .85em;
}

/*--------------------------------------------------------------
# About page
--------------------------------------------------------------*/
/* The hero has no eyebrow of its own; .who-we-are is scoped to
   .about .content, so this mirrors it for use outside that block. */
.tldr-eyebrow {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
  margin-bottom: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.tldr-question-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.tldr-question-list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem 1rem;
  border: 1px solid var(--tldr-border);
  border-radius: .7rem;
  background: var(--surface-color);
  color: var(--default-color);
  font-size: .95rem;
  line-height: 1.45;
}

.tldr-question-list li span {
  text-align: justify;
  text-justify: inter-word;
}

.tldr-question-list li i {
  flex: none;
  margin-top: .15rem;
  color: var(--accent-color);
}

.tldr-tagline {
  margin: 2rem auto 0;
  max-width: 720px;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 65%);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--heading-color);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
}

.tldr-tagline span {
  display: block;
  color: var(--accent-color);
}

@media (max-width: 575.98px) {
  .tldr-tagline { font-size: 1.2rem; padding: 1.15rem 1rem; }
}


/* Bootstrap 5 removed .text-justify; the templates still ask for it.
   inter-word stretches the spaces between words and never the letters
   inside them. No hyphens: words stay whole at the end of a line, the
   way a word processor justifies by default. */
.text-justify {
  text-align: justify;
  text-justify: inter-word;
  hyphens: manual;
}

/*--------------------------------------------------------------
# Services page
--------------------------------------------------------------*/
/* Built on .service-card so the surface, border and hover match the
   rest of the site; these add the parts a service needs — a lead line,
   the audience strip and a call to action pinned to the bottom so a row
   of cards lines its buttons up however long the copy runs. */
.tldr-service {
  display: flex;
  flex-direction: column;
}

.tldr-service-lead {
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: .6rem;
}

.tldr-service-for {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--tldr-border);
  font-size: .88rem;
  color: var(--tldr-ink-soft, color-mix(in srgb, var(--default-color), transparent 30%));
}

.tldr-service-for span {
  display: inline-block;
  margin-right: .35rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-color);
}

.tldr-service-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-weight: 700;
  font-size: .93rem;
  color: var(--accent-color);
  text-decoration: none;
}

.tldr-service-cta i {
  transition: transform .15s ease;
}

.tldr-service-cta:hover,
.tldr-service-cta:focus {
  color: var(--accent-color);
  text-decoration: underline;
}

.tldr-service-cta:hover i {
  transform: translateX(3px);
}

/*--------------------------------------------------------------
# Feedback survey

  The options are real radios and checkboxes with the input visually
  hidden and its label drawn as the button, so the whole thing keeps
  keyboard and screen-reader behaviour for free — no JavaScript decides
  what is selected. Colours come from the shared tokens, so the block
  follows the dark theme without a second set of rules.
--------------------------------------------------------------*/
.tldr-question {
  background: var(--surface-color);
  border: 1px solid var(--tldr-border);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.5rem;
  margin-bottom: 1.25rem;
}

.tldr-question__head {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: 1rem;
}

.tldr-question__number {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tldr-gold), transparent 88%);
  color: var(--tldr-gold-deep);
  font-size: .82rem;
  font-weight: 800;
}

.tldr-question__prompt {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
  font-weight: 700;
  color: var(--heading-color);
}

.tldr-question__required {
  color: var(--tldr-gold-deep);
}

.tldr-question__help {
  margin: .3rem 0 0;
  font-size: .84rem;
  color: color-mix(in srgb, var(--default-color), transparent 32%);
}

.tldr-choices {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

/* Hidden from sight, not from the keyboard or the accessibility tree. */
.tldr-choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tldr-choice {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .95rem;
  border: 1px solid var(--tldr-border-strong);
  /* The same corner as the Send button below them (.btn-lg), so the options
     and the action they lead to read as one set of controls. */
  border-radius: var(--bs-border-radius-lg, .5rem);
  background: var(--tldr-sunken);
  color: var(--default-color);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.tldr-choice:hover {
  border-color: var(--tldr-gold);
  color: var(--tldr-gold-deep);
}

.tldr-choice__on {
  display: none;
}

.tldr-choice__off,
.tldr-choice__on {
  font-size: 1rem;
  opacity: .55;
}

.tldr-choice__input:checked + .tldr-choice {
  border-color: var(--tldr-gold);
  background: color-mix(in srgb, var(--tldr-gold), transparent 86%);
  color: var(--tldr-gold-deep);
}

.tldr-choice__input:checked + .tldr-choice .tldr-choice__off {
  display: none;
}

.tldr-choice__input:checked + .tldr-choice .tldr-choice__on {
  display: inline-block;
  opacity: 1;
}

/* Selection is shown by colour alone otherwise, which a focus ring on an
   invisible input would not reveal — so the label carries the ring. */
.tldr-choice__input:focus-visible + .tldr-choice {
  outline: 2px solid var(--tldr-gold);
  outline-offset: 2px;
}

.tldr-other {
  margin-top: .75rem;
  max-width: 34rem;
}

.tldr-question__text {
  min-height: 7rem;
}

.tldr-feedback-submit {
  text-align: center;
  padding: 1.5rem 0 .5rem;
}

.tldr-feedback-submit .cf-turnstile {
  display: flex;
  justify-content: center;
}

@media (max-width: 575.98px) {
  .tldr-question {
    padding: 1.15rem 1.1rem 1.25rem;
  }

  /* Ratings read as a list on a narrow screen; side by side they wrap into
     an unreadable stagger. */
  .tldr-choices {
    flex-direction: column;
    align-items: stretch;
  }
}

html[data-theme="dark"] .tldr-choice:hover,
html[data-theme="dark"] .tldr-choice__input:checked + .tldr-choice {
  color: var(--tldr-gold);
}