/* hide error msg until invoked */
#error-msg { display:none; }

/* transition for cell fade-in */
td { opacity:0; transition:opacity .3s ease .1s; }
td.filled { opacity:1; }

body {
    font-family: sans-serif;
    background-color: #0B0E1E; /* Fallback background */
    color: #E0E0E0;
    margin: 0;
    padding: 20px;
}

#octo-difference-section {
    background-image: url('assets/banner20.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #FFFFFF; /* White text */
    padding: 60px 20px;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

#octo-difference-section h2 {
    font-family: 'KometHeavy', sans-serif; /* Assuming KometHeavy is Komet ExtraBold or similar */
    font-size: 48px; /* Large, impactful heading */
    margin-bottom: 40px;
}

.compare-toggle {
    margin-bottom: 30px;
    display: flex; /* Added for toggle button layout */
    justify-content: center; /* Added for toggle button layout */
    gap: 10px; /* Added for toggle button layout */
}

.compare-toggle button {
    background: transparent;
    border: 1px solid #003b9f;
    color: #8da3c8;
    padding: 10px 20px;
    border-radius: 8px; /* Rounded corners */
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.compare-toggle button.active {
    background-color: #003b9f; /* Active state background */
    color: #FFFFFF; /* Active state text */
    border-color: #003b9f;
}

.compare-toggle button:hover:not(.active) {
    border-color: #1e77fe; /* Hover border for inactive */
    color: #FFFFFF;
}

.table-container {
    max-width: 1100px;
    margin: 32px auto;
    border-radius: 12px;
    overflow-x: auto;
    background: #040a1a;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}

#comparison-table {
    width: 100%;
    border-collapse: collapse; /* Removes default table borders */
    min-width: 700px; /* Ensure table has a minimum width for scrolling */
}

#comparison-table th, 
#comparison-table td {
    padding: 16px 15px;
    text-align: left;
    vertical-align: middle;
    font-size: 15px;
    color: #B0B8C5; /* Slightly muted text color for data */
    transition: background .25s ease; /* Hover animation */
}

#comparison-table thead th {
    background-color: #071125; /* Darker header background */
    color: #E0E0E0; /* Light grey header text */
    font-weight: 600; /* Bolder header text */
    position: sticky; /* Sticky header */
    top: 0;
    z-index: 2;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

/* Column widths */
#comparison-table th:nth-child(1), 
#comparison-table td:nth-child(1) { width: 25%; }
#comparison-table th:nth-child(2), 
#comparison-table td:nth-child(2) { width: 25%; }
#comparison-table th:nth-child(3), 
#comparison-table td:nth-child(3) { width: 25%; }
#comparison-table th:nth-child(4), 
#comparison-table td:nth-child(4) { width: 25%; }

#comparison-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,.04); /* Row separator */
}

#comparison-table tbody tr:last-child {
    border-bottom: none;
}

/* em-dashes for competitor cells */
#comparison-table td.competitor em {
    font-style: normal; /* Use em dash without italics if that's the visual goal */
    color: #9BA9C8; /* Softer color for em-dash content */
}

/* Feature cells: tooltip trigger '?' button */
.tooltip-trigger {
    background-color: #1E77FE;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px; /* Increased from 14px for better clickability */
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 8px;
    padding: 0;
    line-height: 20px;
    text-align: center;
    transition: background-color 0.2s;
}

.tooltip-trigger:hover {
    background-color: #0056b3;
}

/* Custom Tooltip Styling */
.custom-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #071025;
    color: #E0E0E0;
    border: 1px solid #1E77FE;
    border-radius: 6px;
    padding: 10px;
    font-size: 12px;
    line-height: 1.4;
    max-width: 220px;
    z-index: 100;
    transition: opacity 0.3s, visibility 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.tooltip-trigger:hover + .custom-tooltip,
.tooltip-trigger:focus + .custom-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Row hover highlight (JS will add 'row-hover-highlight' class to tr) */
#comparison-table tbody tr.row-hover-highlight {
    background-color: rgba(30,119,254,0.08);
}

.footer-note {
    font-size: 12px;
    color: #6C7A99;
    text-align: center;
    margin-top: 20px; /* Increased margin */
    padding: 0 15px; /* Add some padding for smaller screens */
}

/* WCAG Focus Styles */
*:focus-visible { /* Using :focus-visible for better accessibility */
    outline: 2px solid #1E77FE;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(30, 119, 254, 0.3);
}

/* Hide columns based on filter */
.hide-col {
    display: none !important;
}


/* Mobile Accordion Styles */
@media (max-width: 768px) {
    #octo-difference-section h2 {
        font-size: 36px; /* Smaller heading on mobile */
    }

    .compare-toggle {
        flex-direction: column; /* Stack buttons on mobile */
        align-items: center;
    }
    .compare-toggle button {
        width: 80%;
        max-width: 300px; /* Max width for toggle buttons */
        margin-bottom: 10px;
    }
    .compare-toggle button:last-child {
        margin-bottom: 0;
    }

    #comparison-table thead {
         /* The sticky header might not be ideal if the table itself is very constrained.
           Consider removing stickiness or adjusting if layout issues arise with many rows. */
    }
    
    #comparison-table th, #comparison-table td {
        padding: 12px 10px; /* Reduced padding */
        font-size: 14px;
    }

    #comparison-table tbody td:first-child {
        font-size: 15px; /* Feature name slightly larger */
    }

    .info { /* Slightly smaller tooltip button */
        width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    /* Specific rules for <= 600px if different from 768px */
    /* By default, competitor columns will be hidden by JS adding .hidden class,
       so no specific CSS here to hide them by default, JS will handle it. */

    /* If a dropdown is to replace toggle buttons, it would be a JS/HTML change.
       Currently, the toggle buttons will filter.
       The prompt says "hide competitor columns by default; show a dropdown labelled "Select competitor…" that toggles columns."
       This implies the existing buttons might be replaced or augmented.
       For now, the JS will handle hiding columns and the existing buttons will function as the "selector".
    */
}

/* Tippy.js theme */
.tippy-box[data-theme~='light-border'] {
  border: 1px solid #d9d9d9; /* Example border */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* New styles for the table */
#comparison-table tbody tr:hover td {
    background: rgba(30,119,254,.08); /* Row hover background */
}

#comparison-table tbody td:first-child {
    font-weight: 500;
    color: #D0D8E5; /* Slightly brighter text for feature names */
    white-space: nowrap;
}

#comparison-table th:nth-child(2),
#comparison-table td:nth-child(2) {
    background: linear-gradient(90deg, rgba(30,119,254,.06) 0%, transparent 100%);
    border-left: 2px solid #1e77fe;
}

#comparison-table .octo-cell {
    color: #FFFFFF; /* White text for Octo Tools data for emphasis */
}
#comparison-table .octo-cell strong {
    color: #1e77fe; /* Blue color for dynamic strong elements */
    font-weight: 700;
}

#comparison-table .competitor {
    /* Styles for competitor columns if any specific needed beyond default td */
}

.info {
    background-color: #1e77fe; /* Blue background */
    color: white;
    border: none;
    border-radius: 50%; /* Circular button */
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px; /* Center question mark */
    text-align: center;
    cursor: pointer;
    margin-left: 8px;
    transition: background-color 0.3s ease;
    padding: 0; /* Remove default padding */
    display: inline-flex; /* For better alignment */
    justify-content: center; /* Center content */
    align-items: center; /* Center content */
}

.info:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Hide the old custom tooltip span if it's still in HTML (should be removed by JS later for Tippy) */
.custom-tooltip {
    display: none !important; 
}

/* Footnote */
.footnote {
    font-size: 13px;
    color: #8da3c8; /* Muted color */
    margin-top: 30px;
    text-align: center;
}

/* Hidden class for columns */
.hidden {
    display: none !important;
}

/* Column slide animation - will be controlled by JS adding/removing a class */
#comparison-table th.competitor,
#comparison-table td.competitor {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: left; /* Animate from the left */
}

#comparison-table th.competitor.slide-out,
#comparison-table td.competitor.slide-out {
    transform: scaleX(0);
    opacity: 0;
}

#comparison-table th.competitor.slide-in,
#comparison-table td.competitor.slide-in {
    transform: scaleX(1);
    opacity: 1;
}

/* Make feature column a touch lighter for legibility */
td.feat {
  color: #d0d9f5;
  font-weight: 500;
  width: 240px;          /* prevents squish on narrow screens */
  white-space: nowrap;
  opacity: 1; /* Ensure feature labels are visible */
}
@media (max-width: 600px) {
  td.feat { width: 160px; }
}

/* Added for Infinity Scripts column highlight */
.inf-accent {
  color: #3BA0FF; /* bright blue text */
  background-color: rgba(59,160,255,.08); /* faint blue overlay */
}

/* Added for Octo Tools BONK Support cell glow */
.bonk-glow {
  position: relative; /* For z-index and potential pseudo-elements if needed later */
  box-shadow: 0 0 12px rgba(40,246,246,.45), inset 0 0 8px rgba(40,246,246,.35);
  z-index: 1; /* To ensure glow is not clipped by adjacent cells if they have backgrounds */
}

@media (prefers-reduced-motion:no-preference){
  @keyframes pulseGlow{
    0%,100% { box-shadow:0 0 12px rgba(40,246,246,.45), inset 0 0 8px rgba(40,246,246,.35); }
    50%    { box-shadow:0 0 18px rgba(40,246,246,.60), inset 0 0 12px rgba(40,246,246,.45); }
  }
  .bonk-glow {
    animation: pulseGlow 4s ease-in-out infinite;
  }
}

/* Ensure table cell padding doesn't get overridden by new backgrounds or shadows */
#comparison-table td.inf-accent,
#comparison-table td.bonk-glow {
    /* padding: 16px 20px; */ /* Re-assert padding if necessary, check original table cell padding */
    /* If default td padding is sufficient, this rule might not be needed or can be more specific */
}