/* =====================================================================
   content-gist.css — theme-aware "GIST BY AUTHORS" box (<gist>)

   Legacy government content ships a hardcoded LIGHT pastel gradient
   background + black text for <gist>, with no dark-mode variant (unlike
   digest/authnote/footnotes, which have `.color-black` overrides). In the
   app's dark mode the theme drives the text colour light, leaving
   light-on-light text inside the gist box — unreadable.

   These rules force a theme-aware surface in both modes. They must live in a
   real .css file (not a .razor <style> block) because the Razor parser treats
   a bare `gist` element selector as an unknown, unclosed HTML tag.

   Specificity is raised above the inline document CSS that ships with the
   content (scoped to `.ayra-content` in ContentViewer, unscoped in the ref
   dialog), and !important is used, so these win regardless of load order.
   ===================================================================== */

/* Full-page / embedded ContentViewer (content rendered in .ayra-content) */
.content-viewer-container .ayra-content gist,
/* Reference-content dialog */
.ref-dialog-content gist {
  display: block;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background-image: none !important;
  background-color: rgba(127, 127, 127, 0.12) !important;
  border: 1px solid rgba(127, 127, 127, 0.25) !important;
  border-left: 4px solid var(--info-color, var(--mud-palette-info, #3D85C6)) !important;
  box-shadow: none !important;
  color: var(--text-primary, var(--mud-palette-text-primary)) !important;
}

.content-viewer-container .ayra-content gist *,
.ref-dialog-content gist * {
  color: var(--text-primary, var(--mud-palette-text-primary)) !important;
  background: transparent !important;
}

/* Light theme: force dark text on the light surface */
[data-theme="light"] .content-viewer-container .ayra-content gist,
[data-theme="light"] .content-viewer-container .ayra-content gist *,
[data-theme="light"] .ref-dialog-content gist,
[data-theme="light"] .ref-dialog-content gist * {
  color: var(--text-primary) !important;
}

/* Keep links inside the gist box visibly distinct in both themes */
.content-viewer-container .ayra-content gist a,
.ref-dialog-content gist a,
[data-theme="light"] .content-viewer-container .ayra-content gist a,
[data-theme="light"] .ref-dialog-content gist a {
  color: #e8912a !important;
}

/* =====================================================================
   .gist-by-authors — the "GIST BY AUTHORS" callout produced by
   GistContentProcessor. Its base style (ContentViewer.razor) is a hardcoded
   dark gradient with a blue GLOW and a hover lift: a dark box on a light page
   in light mode, and visually gimmicky. Replace with a flat, professional,
   theme-aware callout — subtle border + a single accent left-bar, no glow,
   no hover animation. Higher specificity + !important so it wins over the
   later-injected base rule.
   ===================================================================== */
.content-viewer-container .gist-by-authors,
.ref-dialog-content .gist-by-authors {
  border: 1px solid rgba(127, 127, 127, 0.22) !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 8px !important;
  box-shadow: none !important;            /* remove the blue glow */
  background: rgba(127, 127, 127, 0.08) !important;
  background-image: none !important;
  color: var(--text-primary, var(--mud-palette-text-primary)) !important;
  transition: none !important;
}

.content-viewer-container .gist-by-authors:hover,
.ref-dialog-content .gist-by-authors:hover {
  transform: none !important;            /* no hover lift */
  box-shadow: none !important;
}

.content-viewer-container .gist-by-authors *,
.ref-dialog-content .gist-by-authors * {
  color: inherit !important;
  background: transparent !important;
}

.content-viewer-container .gist-by-authors .gist-subtitle,
.ref-dialog-content .gist-by-authors .gist-subtitle {
  border-bottom: 1px solid rgba(127, 127, 127, 0.25) !important;
}

.content-viewer-container .gist-by-authors a,
.ref-dialog-content .gist-by-authors a {
  color: #3b82f6 !important;
  text-decoration: underline !important;
}

.content-viewer-container .gist-by-authors em,
.ref-dialog-content .gist-by-authors em {
  color: #3b82f6 !important;
  font-style: italic !important;
}

/* Dark theme: flat dark slate (no gradient, no glow) */
[data-theme="dark"] .content-viewer-container .gist-by-authors,
[data-theme="dark"] .ref-dialog-content .gist-by-authors {
  background: #232b38 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  border-left-color: #3b82f6 !important;
  color: #e5e7eb !important;
}
[data-theme="dark"] .content-viewer-container .gist-by-authors a,
[data-theme="dark"] .ref-dialog-content .gist-by-authors a,
[data-theme="dark"] .content-viewer-container .gist-by-authors em,
[data-theme="dark"] .ref-dialog-content .gist-by-authors em {
  color: #93c5fd !important;
}

/* Light theme: dark text on a soft light surface */
[data-theme="light"] .content-viewer-container .gist-by-authors,
[data-theme="light"] .ref-dialog-content .gist-by-authors {
  background: #f4f6fa !important;
  border-color: #e3e8f0 !important;
  border-left-color: #2563eb !important;
  color: #1f2937 !important;
}
[data-theme="light"] .content-viewer-container .gist-by-authors a,
[data-theme="light"] .ref-dialog-content .gist-by-authors a,
[data-theme="light"] .content-viewer-container .gist-by-authors em,
[data-theme="light"] .ref-dialog-content .gist-by-authors em {
  color: #1d4ed8 !important;
}