:root {
    --rb-table-bg: #FFFFFF;
    --rb-table-text: #1a1a1a;
    --rb-header-bg: #F0F0F0;
    --rb-header-text: #333333;
    --rb-border-main: #E0E0E0;
    --rb-border-sub: #F0F0F0;
    --rb-category-bg: #FAF4E3;
    --rb-category-text: #8B6602;
    --badge-yes-bg: #F2F7E3;
    --badge-yes-text: #547100;
    --badge-view-bg: #E5EDF7;
    --badge-view-text: #0E3672;
    --badge-test-bg: #FAF4E3;
    --badge-test-text: #8B6602;
    --badge-no-bg: #F0F0F0;
    --badge-no-text: #333333;
  }
  /* Dark colours follow the docs site's own theme toggle (the "dark" class
     on <html>), not the operating system's colour-scheme setting. Using
     prefers-color-scheme here made the table go dark whenever the OS was
     in dark mode, even while the site itself was in light mode. */
  html.dark {
    --rb-table-bg: #121212;
    --rb-table-text: #F0F0F0;
    --rb-header-bg: #333333;
    --rb-header-text: #F0F0F0;
    /* Lighter than --rb-header-bg so the line under the column headers
       stays visible; at #333333 it matched the header and disappeared. */
    --rb-border-main: #4D4D4D;
    --rb-border-sub: #262626;
    --rb-category-bg: #8B6602;
    --rb-category-text: #FAF4E3;
    --badge-yes-bg: #547100;
    --badge-yes-text: #F2F7E3;
    --badge-view-bg: #0E3672;
    --badge-view-text: #E5EDF7;
    --badge-test-bg: #8B6602;
    --badge-test-text: #FAF4E3;
    --badge-no-bg: #333333;
    --badge-no-text: #F0F0F0;
  }

  /* Scoped, paired background + text overrides for THIS table only.
     Fixes a bug where an unscoped "tr td { background !important }" rule
     was painting every table on the page black in dark mode without
     ever forcing a matching text color, making body rows unreadable. */
  .fyno-roles-table-wrapper table.fyno-roles-table td {
    background-color: var(--rb-table-bg, #FFFFFF) !important;
    color: var(--rb-table-text, #1a1a1a) !important;
  }
  .fyno-roles-table-wrapper table.fyno-roles-table th {
    background-color: var(--rb-header-bg, #F0F0F0) !important;
    color: var(--rb-header-text, #333333) !important;
  }
  .fyno-roles-table-wrapper table.fyno-roles-table tr td[colspan] {
    background-color: var(--rb-category-bg, #FAF4E3) !important;
    color: var(--rb-category-text, #8B6602) !important;
  }

  /* Custom CSS Tooltip Logic with speech bubble arrow pointer */
  .tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
  }
  .tooltip-icon {
    color: currentColor; /* Inherits text color of parent badge */
    opacity: 0.8;
    font-size: 10px;
    border: 1px solid currentColor;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-style: normal;
  }
  .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 160px;
    background-color: #202124;
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
    padding: 6px 10px;
    position: absolute;
    bottom: 150%; /* Adjusted to accommodate arrow */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s ease-in-out;
    font-size: 11px;
    line-height: 1.4;
    z-index: 99;
    font-weight: normal;
    white-space: normal;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.25);
  }
  
  /* Creates the visual pointer/arrow under the speech bubble box */
  .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Sits precisely at the bottom boundary of the text box */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #202124 transparent transparent transparent; /* Match background color */
  }

  .tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }

  /* In dark mode the #202124 bubble blended into the #121212 table and its
     dark shadow was invisible, so invert the tooltip there. The arrow colour
     must match the bubble background. */
  html.dark .tooltip-text {
    background-color: #F0F0F0;
    color: #1a1a1a;
  }
  html.dark .tooltip-text::after {
    border-color: #F0F0F0 transparent transparent transparent;
  }
astro-island,astro-slot,astro-static-slot{display:contents}