/* custom.css for k-diagram documentation with Furo theme */

/*--------------------------------------------------------------------------
 * Variables and Color Palette (k-diagram Theme v2)
 *--------------------------------------------------------------------------*/

:root,
html[data-theme="light"] {
    /* --- Brand Colors --- */
    /* Primary: Dark Red based on image_357b7c.png */
    --color-brand-primary: #00796B; /* DarkCyan shade  */
    /* Content color for static links, H2 */
    --color-brand-content: #A93226; /* Dark red or brown */
    /* Secondary: Slate Blue from logo_k_diagram.png */
    --color-brand-secondary: #36456e; /* Dark shape Blue */
    /* Tertiary: Sea Green from logo_k_diagram.png */
    --color-brand-tertiary: #2E8B57; /* SeaGreen */
    
    /* --- Sidebar Overrides (Light Mode) --- */
    --color-sidebar-background:       var(--color-background-secondary);
    --color-sidebar-background-hover: var(--color-table-hover-bg-tint);  /* or whatever tint you like */
    --color-sidebar-link-text:        var(--color-foreground-secondary);
    --color-sidebar-link-text--top-level: var(--color-foreground-primary);


    /* --- Status Colors --- */
    --color-warning-border: #f57c00;  /* Amber */
    --color-warning-bg-tint: 15%;
    --color-error-border: var(--color-brand-primary); /* Use Primary Red */
    --color-error-bg-tint: 15%;
    --color-info-border: var(--color-brand-secondary);/* Use Secondary Blue */
    --color-info-bg-tint: 10%;
    --color-tip-border: var(--color-brand-tertiary);  /* Use Tertiary Green */
    --color-tip-bg-tint: 10%;

    /* --- Base Colors --- */
    --color-foreground-primary: #212529; /* Near Black */
    --color-foreground-secondary: #495057; /* Dark Grey */
    --color-foreground-muted: #6c757d;   /* Medium Grey */
    --color-background-primary: #ffffff;
    --color-background-secondary: #f8f9fa;
    --color-background-hover: #e9ecef;
    --color-border: #dee2e6;

    /* --- Code Blocks --- */
    --color-code-background: #f8f9fa;
    --color-code-border: #dee2e6; /* Match base border */

    /* --- Tables --- */
    --color-table-border: #dee2e6;
    --color-table-header-bg: #f1f3f5;
    --color-table-stripe-bg: #f8f9fa; /* Subtle stripe */
    --color-table-hover-bg-tint: 8%; /* Primary Red tint % */
}

html[data-theme="dark"] {
    /* --- Brand Colors (Dark Mode) --- */
    --color-brand-primary: #E57373; /* Light Red */
    --color-brand-content: #F08080; /* Light Coral */
    --color-brand-secondary: #8a9bcd; /* Light Slate Blue */
    --color-brand-tertiary: #66bbab; /* Light Sea Green */
    
    /* --- Sidebar Overrides (Dark Mode) --- */
    --color-sidebar-background:       var(--color-background-secondary);
    --color-sidebar-background-hover: var(--color-table-hover-bg-tint);
    --color-sidebar-link-text:        var(--color-foreground-muted);
    --color-sidebar-link-text--top-level: var(--color-foreground-primary);
    
    /* --- Status Colors (Dark Mode) --- */
    --color-warning-border: #ffa726; /* Lighter Amber */
    --color-warning-bg-tint: 20%;
    --color-error-border: var(--color-brand-primary); /* Use Primary Light Red */
    --color-error-bg-tint: 20%;
    --color-info-border: var(--color-brand-secondary); /* Use Secondary Light Blue */
    --color-info-bg-tint: 15%;
    --color-tip-border: var(--color-brand-tertiary);  /* Use Tertiary Light Green */
    --color-tip-bg-tint: 15%;

    /* --- Base Colors (Dark Mode) --- */
    --color-foreground-primary: #e9ecef; /* Light Grey */
    --color-foreground-secondary: #ced4da;
    --color-foreground-muted: #adb5bd;
    --color-background-primary: #212529; /* Dark Grey */
    --color-background-secondary: #2c3034;
    --color-background-hover: #343a40;
    --color-border: #495057;

    /* --- Code Blocks (Dark Mode) --- */
    --color-code-background: #2c3034;
    --color-code-border: #495057;

    /* --- Tables (Dark Mode) --- */
    --color-table-border: #495057;
    --color-table-header-bg: #343a40;
    --color-table-stripe-bg: #2c3034; /* Subtle stripe */
    --color-table-hover-bg-tint: 12%; /* Primary Red tint % */
}

/*--------------------------------------------------------------------------
 * General Typography & Layout
 *--------------------------------------------------------------------------*/
body {
    line-height: 1.7;
    font-size: 16px;
    font-family: "Segoe UI", Roboto, Ubuntu, Cantarell,
                 "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body > .container, .content > article {
    max-width: 960px;
}

/* Headings */
h1, .heading-title {
    font-size: 2.7rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.7rem;
    /* Use Primary Red for H1 */
    border-bottom: 3px solid var(--color-brand-primary);
    color: var(--color-brand-primary);
    font-weight: 700;
    letter-spacing: -0.5px;
}

h2 {
    font-size: 2.0rem;
    margin-top: 3.5rem;
    margin-bottom: 1.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    /* Use Content Red for H2 */
    color: var(--color-brand-content);
    font-weight: 600;
}

h3 {
    font-size: 1.6rem;
    margin-top: 3rem;
    margin-bottom: 1.2rem;
    color: var(--color-foreground-primary);
    font-weight: 600;
}

h4 {
    font-size: 1.25rem;
    font-weight: 600;
    /* Use Secondary Blue for H4 */
    color: var(--color-brand-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2rem;
}

/* Page title */
.content h1, article h1 {
  color: var(--color-brand-primary) !important;  /* your teal */
  font-weight: 700;
}

/* Section titles */
.content h2, article h2,
.content h2 a, article h2 a {                    /* catch the linked (kdiagram.plot) part */
  color: var(--color-foreground-primary) !important;  /* black */
  font-weight: 700 !important;
}

/* H3: keep default look */
.content h3, article h3,
.content h3 a, article h3 a {
  color: var(--color-foreground-primary);
  font-weight: 600;
}


/*--------------------------------------------------------------------------
 * Code Blocks & Inline Code
 *--------------------------------------------------------------------------*/
pre, :not(pre) > code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono",
                 Menlo, Courier, monospace;
    border-radius: 5px;
    border: 1px solid var(--color-code-border);
    background-color: var(--color-code-background);
}
pre {
    padding: 1em 1.2em;
    margin: 1.7em 0;
    font-size: 0.92em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    line-height: 1.6;
}
:not(pre) > code {
    padding: 0.2em 0.45em;
    font-size: 0.9em;
    white-space: nowrap;
}
button.copybtn {
    background-color: transparent !important;
    border: 1px solid var(--color-code-border) !important;
    color: var(--color-foreground-muted) !important;
    opacity: 0.5 !important;
    transition: all 0.2s ease-in-out;
}
button.copybtn:hover {
    opacity: 1 !important;
    background-color: var(--color-code-border) !important;
    color: var(--color-foreground-primary) !important;
}

/*--------------------------------------------------------------------------
 * Tables
 *--------------------------------------------------------------------------*/
table.docutils {
    width: 100%;
    margin: 2em 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-table-border);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    overflow: hidden;
}

table.docutils th {
    background-color: var(--color-table-header-bg);
    border-bottom: 1px solid var(--color-table-border);
    padding: 0.9em 1em;
    font-weight: 600;
    text-align: left;
    color: var(--color-foreground-primary);
}
table.docutils thead tr:first-child th {
    border-top: none;
}
table.docutils td {
    border-top: 1px solid var(--color-table-border);
    padding: 0.9em 1em;
    vertical-align: top;
    font-size: 0.95em;
}
table.docutils tbody tr:nth-child(even) {
    background-color: var(--color-table-stripe-bg);
}
table.docutils tbody tr:hover {
    /* Hover uses tint of Primary Red */
    background-color: color-mix(
        in srgb,
        var(--color-brand-primary) var(--color-table-hover-bg-tint),
        transparent
    );
    transition: background-color 0.15s ease-in-out;
}

/*--------------------------------------------------------------------------
 * Admonitions - Colored by Type
 *--------------------------------------------------------------------------*/
.admonition {
    border-radius: 6px;
    padding: 1.2em 1.5em;
    margin: 2em 0;
    border-left-width: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    background-color: var(--color-background-secondary);
}
.admonition p:last-child {
    margin-bottom: 0;
}
.admonition .admonition-title {
    font-weight: 700;
    margin-bottom: 0.6em;
    display: block;
}

/* Note / Info / See Also (Secondary Blue) */
.admonition.note, .admonition.seealso {
    border-left-color: var(--color-brand-secondary);
    background-color: color-mix(
        in srgb,
        var(--color-brand-secondary) var(--color-info-bg-tint),
        var(--color-background-secondary)
    );
}
.admonition.note .admonition-title,
.admonition.seealso .admonition-title {
    color: var(--color-brand-secondary);
}

/* Tip / Hint (Tertiary Green) */
.admonition.tip, .admonition.hint {
    border-left-color: var(--color-brand-tertiary);
    background-color: color-mix(
        in srgb,
        var(--color-brand-tertiary) var(--color-tip-bg-tint),
        var(--color-background-secondary)
    );
}
.admonition.tip .admonition-title,
.admonition.hint .admonition-title {
    color: var(--color-brand-tertiary);
}

/* Warning / Caution (Orange) */
.admonition.warning, .admonition.caution {
    border-left-color: var(--color-warning-border);
    background-color: color-mix(
        in srgb,
        var(--color-warning-border) var(--color-warning-bg-tint),
        var(--color-background-secondary)
    );
}
.admonition.warning .admonition-title,
.admonition.caution .admonition-title {
    color: var(--color-warning-border);
}

/* Error / Danger / Important (Primary Red) */
.admonition.error, .admonition.danger, .admonition.important {
     border-left-color: var(--color-error-border);
     background-color: color-mix(
        in srgb,
        var(--color-error-border) var(--color-error-bg-tint),
        var(--color-background-secondary)
     );
}
.admonition.error .admonition-title,
.admonition.danger .admonition-title,
.admonition.important .admonition-title {
     color: var(--color-error-border);
}


/*--------------------------------------------------------------------------
 * Sidebar Customization (Furo) - Updated Hover
 *--------------------------------------------------------------------------*/

.toc-drawer > .toc-tree {
     padding-inline-start: 1.5rem;
}
/* only target the first UL under .toc-drawer */
.toc-drawer > .toc-tree > li.current > a.reference {
  /* your active‐link styles */
  background-image: none !important;
  background-color: var(--color-brand-primary)!important;
  color: var(--color-background-primary) !important;
  font-weight: 600;
}

.sidebar-drawer .reference {
    transition: background-color 0.15s ease-in-out,
                color 0.15s ease-in-out,
                padding-left 0.15s ease-in-out;
    padding: 0.3em 0.8em;
    border-radius: 4px;
    margin: 1px 0;
    display: block;
}

.sidebar-drawer .reference:hover {
    /* kill the Furo gradient */
    background-image: none !important;
    /* then draw a solid background */
    background-color: var(--color-brand-primary) !important;
    /* and keep the text dark */
    color: var(--color-background-primary) !important;
    padding-left: 1.1em;
}


/* "undo" the highlight for nested current links */
.sidebar-drawer .toc-tree li li.current > a.reference {
  background: none !important;
  color: var(--color-sidebar-link-text) !important;
  font-weight: normal !important;
}


/*--------------------------------------------------------------------------
 * Sphinx Design Components 
 *--------------------------------------------------------------------------*/
.sd-button-link {
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.sd-button-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Style primary/secondary buttons */
.sd-button-link.sd-color-primary {
    background-color: var(--color-brand-primary) !important;
    border-color: var(--color-brand-primary) !important;
    color: white !important; /* Assuming white text works on primary */
}
.sd-button-link.sd-color-primary:hover {
    /* Slightly darken primary color */
    background-color: color-mix(in srgb, var(--color-brand-primary) 85%, black) !important;
}
.sd-button-link.sd-color-secondary {
    background-color: var(--color-brand-secondary) !important;
    border-color: var(--color-brand-secondary) !important;
    color: white !important; /* Assuming white text works on secondary */
}
.sd-button-link.sd-color-secondary:hover {
     /* Slightly darken secondary color */
    background-color: color-mix(in srgb, var(--color-brand-secondary) 85%, black) !important;
}

.sd-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sd-card:hover {
     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     /* Use Secondary Blue for card hover border */
     border-color: var(--color-brand-secondary);
}
.sd-card .sd-card-header {
    background-color: var(--color-background-secondary);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    padding: 0.8em 1.2em;
}

.sd-card .sd-card-body {
    padding: 1.2em;
}


/* ------------------------------
   Footnote-style citations (footcite)
   Works with Sphinx/Docutils output:
   - footnote refs in-text
   - footnote blocks at page end
   ------------------------------ */
.citation {
    /* A colored accent bar on the left */
    border-left: 3px solid var(--color-brand-primary);
    /* Space between the bar and the text */
    padding-left: 1.5em;
    /* Space between each reference entry */
    margin-bottom: 1.5em;
}

.citation .label {
    /* Make the citation label (e.g., [Hin98]) bold */
    font-weight: bold;
}

/* --- Elegant Card Reference Style --- */
.citation:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* In-text footnote reference markers (the little superscripts) */
a.footnote-reference,
a[role="doc-noteref"] {
  text-decoration: none;
  font-weight: 600;
  padding: 0 .15em;
  border-bottom: 1px dotted var(--color-brand-primary);
}
a.footnote-reference:hover,
a[role="doc-noteref"]:hover {
  color: var(--color-brand-primary);
  border-bottom-style: solid;
}
a.footnote-reference:focus-visible,
a[role="doc-noteref"]:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Container for the footnotes section */
.footnotes {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-brand-primary);
}

/* Individual footnote blocks */
.footnote,
dl.footnote {
  /* match your .citation accent card style */
  border-left: 3px solid var(--color-brand-primary);
  padding-left: 1.5em;
  margin: 1.25em 0 1.5em;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.footnote:hover,
dl.footnote:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* Footnote label [1], [2], ... */
.footnote .label,
dl.footnote > dt,
.footnote dt .label {
  font-weight: bold;
}

/* Footnote text body */
.footnote p,
dl.footnote > dd {
  margin: .35em 0 0;
}

/* Back-reference links (the ↩ back-to-text link) */
a.footnote-backref,
a[role="doc-backlink"] {
  font-size: .9em;
  margin-left: .5em;
  opacity: .75;
}
a.footnote-backref::before,
a[role="doc-backlink"]::before {
  content: "↩︎";
  margin-right: .25em;
}

/*--------------------------------------------------------------------------
 * Hero Image Enhancement
 *--------------------------------------------------------------------------*/

/* Define the animation */
@keyframes fadeIn-floatUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply the animation to the hero image card */
.hero-image-card {
  animation: fadeIn-floatUp 0.8s ease-out forwards;
}


/* Make the card a positioning container for the badge */
.sd-card {
  position: relative;
}

/* Base style for the badge */
.new-badge-card {
  display: none; /* Hidden by default, JS will show it */
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 7px;
  font-size: 0.75em;
  font-weight: 700;
  color: white;
  background-color: var(--color-brand-primary); /* Your theme's primary red */
  border-radius: 6px;
  z-index: 2;
  /* Apply the sparkle animation */
  animation: sparkle 1.5s infinite ease-in-out;
}

/* Keyframe animation for the sparkle/pulse effect */
@keyframes sparkle {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 121, 107, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 121, 107, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 121, 107, 0);
  }
}

/*--------------------------------------------------------------------------
 *  Restore clickable cards and position badges
 *--------------------------------------------------------------------------*/
/* text links only (not cards / header anchors) */
.content a:not(.sd-stretched-link):not(.sd-card-link):not(.headerlink),
article a:not(.sd-stretched-link):not(.sd-card-link):not(.headerlink) {
  color: var(--color-brand-content);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  position: relative;
  transition: color .2s ease-out;
}
.content a:not(.sd-stretched-link):not(.sd-card-link):not(.headerlink)::after,
article a:not(.sd-stretched-link):not(.sd-card-link):not(.headerlink)::after {
  content: "";
  position: absolute;
  right: 0;
  width: 0;
  height: 1px;
  bottom: -2px; /*margin-top: 2px*/;
  background: var(--color-brand-content); /*var(--color-brand-primary) #A93226*/;
  transition: width .3s ease;
}
.content a:not(.sd-stretched-link):not(.sd-card-link):not(.headerlink):hover,
article  a:not(.sd-stretched-link):not(.sd-card-link):not(.headerlink):hover {
  color: var(--color-brand-primary);
}
.content a:not(.sd-stretched-link):not(.sd-card-link):not(.headerlink):hover::after,
article  a:not(.sd-stretched-link):not(.sd-card-link):not(.headerlink):hover::after {
  width: 100%;
  left: 0;
}


/* critical: the stretched-link anchor itself must NOT be positioned */
a.sd-stretched-link { position: static !important; }

/* full-card, transparent clickable layer generated by the anchor */
a.sd-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent !important;
}


/* Topic as a soft card */
.topic {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: var(--color-background-secondary);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.topic p.topic-title {
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--color-foreground-primary);
}


/* === CTA tiles (home grid) === */
.cta-tiles .sd-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-background-primary);
  transition: transform .15s ease, box-shadow .15s ease,
              background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cta-tiles .sd-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  background-color: var(--color-brand-primary) !important;  /* #00796B in light mode */
  border-color: var(--color-brand-primary) !important;
}

/* Make text readable on brand background */
.cta-tiles .sd-card:hover,
.cta-tiles .sd-card:hover .sd-card-header,
.cta-tiles .sd-card:hover .sd-card-body,
.cta-tiles .sd-card:hover p,
.cta-tiles .sd-card:hover a {
  color: #fff !important;
}

/* Header polish */
.cta-tiles .sd-card .sd-card-header {
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  font-size: 1.05rem;
  padding: .75rem 1rem;
}
.cta-tiles .sd-card:hover .sd-card-header {
  border-bottom-color: rgba(255,255,255,.35);
}

/* Body spacing */
.cta-tiles .sd-card .sd-card-body {
  padding: .9rem 1rem 1rem;
  color: var(--color-foreground-secondary);
}

/* Keep the stretched-link overlay working over the card */
.cta-tiles .sd-card { position: relative; }
.cta-tiles a.sd-stretched-link { position: static !important; }
.cta-tiles a.sd-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent !important;
}

/* Optional: subtle emoji lift on hover */
.cta-tiles .sd-card:hover .sd-card-header::before {
  transform: translateY(-1px);
}

/* NEW badge you already use */
.new-badge-card {
  display: inline-block;
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 7px;
  font-size: 0.70rem;
  font-weight: 800;
  color: #fff !important;
  background-color: #ef4444;
  border-radius: 9999px;
  border: 2px solid #fff;
  z-index: 3;
}

/* Dark mode: keep hover strong and readable */
html[data-theme="dark"] .cta-tiles .sd-card:hover {
  /* uses var(--color-brand-primary) from your dark palette */
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

:root { --tile-hover-bg: #2166F3; }
html[data-theme="dark"] { --tile-hover-bg: #2166F3; } /* same in dark */
.cta-tiles .sd-card:hover {
 background-color: var(--tile-hover-bg) !important; 
 border-color: var(--tile-hover-bg) !important; 
}

/* ================================
   SEE ALSO (image previews on hover)
   ================================ */

/* Base card in the See-Also grid */
.see-also-tiles .sd-card{
  position: relative;                     /* for ::before/::after */
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: transparent !important;     /* let preview show through */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Header/body must be transparent so the image is visible */
.see-also-tiles .sd-card .sd-card-header,
.see-also-tiles .sd-card .sd-card-body{
  background: transparent !important;
  position: relative;
  z-index: 2;                              /* above ::before/::after */
}

/* Subtle lift on hover */
.see-also-tiles .sd-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  border-color: var(--color-brand-secondary);
}

/* ---- preview layers ---- */

/* image layer (set per card with --card-preview below) */
.see-also-tiles .sd-card::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--card-preview);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; transform:scale(1.04);
  transition: opacity .25s ease, transform .25s ease;
  z-index:0;
}

/* blue tint for readability (Furo title/link blue #2166F3) */
.see-also-tiles .sd-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom,
              rgba(33,102,243,.18), rgba(33,102,243,.52));
  opacity:0; transition:opacity .25s ease;
  z-index:1;
}

/* reveal image + tint */
.see-also-tiles .sd-card:hover::before{ opacity:1; transform:scale(1); }
.see-also-tiles .sd-card:hover::after { opacity:1; }

/* Text color on hover = your dark red */
.see-also-tiles .sd-card:hover,
.see-also-tiles .sd-card:hover .sd-card-header,
.see-also-tiles .sd-card:hover .sd-card-body,
.see-also-tiles .sd-card:hover p,
.see-also-tiles .sd-card:hover a{
  color: #A93226 !important;              /* your “brand-content” red */
}

/* Keep stretched-link working */
.see-also-tiles .sd-card a.sd-stretched-link{ position: static !important; }
.see-also-tiles .sd-card a.sd-stretched-link::after{
  content:""; position:absolute; inset:0; z-index:3; background:transparent !important;
}

/* Soft accent ONLY for the “Full API” tile (no preview, no tint) */
.see-also-tiles .see-also-accent{
  background: color-mix(in srgb, var(--color-brand-primary) 8%, var(--color-background-secondary));
}
html[data-theme="dark"] .see-also-tiles .see-also-accent{
  background: color-mix(in srgb, var(--color-brand-primary) 14%, var(--color-background-secondary));
}
/* prevent image/tint on the accent tile */
/*.see-also-tiles .see-also-accent::before,
.see-also-tiles .see-also-accent::after{ display:none !important; }
/* keep default text color on the accent tile */
.see-also-tiles .see-also-accent:hover,
.see-also-tiles .see-also-accent:hover *{
  color: var(--color-foreground-primary) !important;
}

/* Per-card preview images
   (custom.css is at /_static/css/, previews at /_static/previews/) */
.see-also-tiles .card--uncertainty { --card-preview: url("_static/previews/uncertainty.png"); }
.see-also-tiles .card--errors      { --card-preview: url("_static/previews/errors.png"); }
.see-also-tiles .card--evaluation  { --card-preview: url("_static/previews/evaluation.png"); }
.see-also-tiles .card--importance  { --card-preview: url("_static/previews/importance.png"); }
.see-also-tiles .card--relationship{ --card-preview: url("_static/previews/relationship.png"); }

/* Dark mode: stronger shadow only */
html[data-theme="dark"] .see-also-tiles .sd-card:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* Full API — base soft tint */
.see-also-tiles .see-also-accent{
  /* Adjust these two numbers to taste */
  --api-tint-rest: 10%;
  --api-tint-border: 25%;
  background: color-mix(in srgb, #2166F3 var(--api-tint-rest), var(--color-background-secondary));
  border-color: color-mix(in srgb, #2166F3 var(--api-tint-border), var(--color-border));
}

/* Stronger tint on hover (still no image) */
.see-also-tiles .sd-card.see-also-accent:hover{
  --api-tint-hover: 22%;
  background: color-mix(in srgb, #2166F3 var(--api-tint-hover), var(--color-background-secondary));
  border-color: #2166F3;
  color: var(--color-foreground-primary) !important; /* keep text readable */
}

/* No preview image for this tile */
.see-also-tiles .sd-card.see-also-accent::before{ display:none !important; }

/* OPTIONAL: add a subtle blue overlay tint (comment out if not wanted) */
.see-also-tiles .sd-card.see-also-accent::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(135deg, rgba(33,102,243,.10), rgba(33,102,243,0) 60%);
  opacity: 1; /* set to 0 and add :hover {opacity:1} if you want it only on hover */
}

hr.hr-spacer{
  margin: 1.5em 0 2em !important;
  border: 0 !important;           /* remove the stroke */
  height: 0 !important;           /* neutralize UA defaults */
  background: transparent !important;
}