.diacritic-toolbar {
    gap: 12px;
    align-items: center;
    padding: 8px;
}

.diacritic-btn {
    /* Reset button styles to look like text */
    background: none;
    border: none;
    padding: 4px 8px;
    margin: 0;
    cursor: pointer;
    
    /* Text styling */
    font-family: var(--dictionary-font-family);
    font-size: 1.4rem; /* Bigger than base font */
    color: var(--charcoal); /* Normal text color */
    line-height: 1.4;
    
    /* Smooth transitions */
    transition: color 0.2s ease, transform 0.1s ease;
    
    /* Remove default button focus outline */
    outline: none;
    
    /* Subtle radius for better click target */
    border-radius: 4px;
}

.diacritic-btn:hover {
    background-color: #f38361; /* Vermillion color */
    transform: scale(1.05); /* Slight scale up on hover */
}

/* SVG icons are smaller than text glyphs (the dotted circle only fills part of
   the viewBox), so an extra scale-up on hover makes them feel as big as the
   neighboring text buttons (ḫ š ʾ). Compounds with the button's scale(1.05). */
.diacritic-btn svg {
    transition: transform 0.1s ease;
}
.diacritic-btn:hover svg {
    transform: scale(1.15);
}

.diacritic-btn:active {
    transform: scale(0.98); /* Slight scale down when pressed */
}

.diacritic-btn:focus-visible {
    /* Accessible focus indicator */
    box-shadow: 0 0 0 2px #e74c3c;
    color: #e74c3c;
}

/* === HEADER DIACRITIC TOOLBAR ===
   Base: the compact 3x2 grid, for headers that cannot spare the width. The single
   row lives in a min-width query further down. */
.header-center .diacritic-toolbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: auto auto; /* 2 rows */
    gap: 3px; /* Compact spacing for header */
    align-items: center;
    padding: 2px 0; /* Minimal padding */
    justify-content: center;
    max-width: 90px; /* Adjust based on button size */
    margin-right: 10px;
}

/* Header-specific diacritic buttons */
.header-center .diacritic-toolbar .diacritic-btn {
    /* Reset button styles */
    background: none;
    border: none;
    padding: 2px 5px; /* Compact padding for header */
    margin: 0;
    cursor: pointer;

    /* Text styling - compact for header */
    font-family: var(--dictionary-font-family);
    font-size: 1.1rem; /* Smaller than index page */
    color: white; /* White text on charcoal background */
    line-height: 1.1;

    /* Smooth transitions */
    transition: all 0.2s ease;

    /* Remove default button focus outline */
    outline: none;

    /* Subtle radius */
    border-radius: 3px;

    /* Ensure minimum click target */
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Header diacritic button hover - use vermillion */
.header-center .diacritic-toolbar .diacritic-btn:hover {
    background-color: var(--vermilion);
    color: white;
    transform: scale(1.05);
}

/* Header diacritic button active state */
.header-center .diacritic-toolbar .diacritic-btn:active {
    transform: scale(0.98);
    background-color: #d44331; /* Darker vermillion */
}

/* Header diacritic button focus state */
.header-center .diacritic-toolbar .diacritic-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--vermilion);
    background-color: var(--vermilion);
}

/* === HEADER DIACRITIC TOOLBAR, WIDE === */
/* From 1000px up the six glyphs go on one line and grow to nearly the index
   page's size: one row reads as a single keyboard, and the characters become big
   enough to hit without aiming. The width comes out of the search field next to
   it (max-width 1000px, so it has slack); below this the field starts clipping
   its own placeholder, which is why the 3x2 grid stays the default. */
@media (min-width: 1000px) {
    .header-center .diacritic-toolbar {
        display: flex;
        flex-wrap: nowrap;
        flex: 0 0 auto;   /* never squeezed - the search field gives instead */
        gap: 4px;
        max-width: none;
        margin-right: 14px;
    }

    .header-center .diacritic-toolbar .diacritic-btn {
        font-size: 1.35rem;
        line-height: 1;
        padding: 2px 6px;
        min-width: 30px;
        min-height: 30px;
    }
}

/* === RESPONSIVE ADJUSTMENTS FOR GRID === */
@media (max-width: 768px) {
    /* Your existing mobile grid layout */
    .site-header {
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto;
        min-height: auto;
        padding: 15px 0;
    }

    .header-left, .header-center, .header-right {
        padding: 10px 15px;
    }
    
    /* Adjust toolbar for mobile */
    .header-center .diacritic-toolbar {
        gap: 4px;
    }
    
    .header-center .diacritic-toolbar .diacritic-btn {
        font-size: 0.9rem;
        padding: 1px 4px;
        min-width: 20px;
        min-height: 20px;
    }
}

@media (max-width: 480px) {
    /* Hide toolbar on very small screens to save space */
    .header-center .diacritic-toolbar {
        display: none;
    }
}
/* The "i" of the search help button: drawn (a serif i, dot over a flagged stem on a
   bracketed foot) rather than typed, so it looks the same on every system instead of
   taking whatever italic the platform's sans-serif has. White on the button's disc. */
.help-icon .help-i {
    display: block;
    width: 19px;
    height: 19px;
    fill: currentColor;
}