/* === SEARCH COMPONENTS === */

/* --- GENERAL LAYOUT --- */
form {
    width: 100%;
    display: flex;
    justify-content: center;
}

.search-field {
    width: 100%;
    max-width: 900px;
    display: flex;
    height: 50px;
    border-radius: 5px;
    overflow: visible;
}

/* === INPUT FIELD AND WRAPPER === */
.search-field > input,
.search-field .autocomplete-wrapper input {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 5px 0 0 5px;
    background-color: #fff;
    transition: all 0.3s;
    box-sizing: border-box;
}

/* === INPUT FOCUS STATES === */
.search-field > input:focus,
.search-field .autocomplete-wrapper input:focus {
    border-color: var(--vermilion);
    box-shadow: 0 0 0 1px var(--vermilion);
    outline: none;
}

.search-field > input:focus + button,
.search-field .autocomplete-wrapper:focus-within + button {
    border-color: var(--vermilion);
    box-shadow: 0 0 0 1px var(--vermilion);
}

/* === AUTOCOMPLETE WRAPPER & DROPDOWN === */
.search-field .autocomplete-wrapper {
    position: relative;
    flex: 1;
    height: 100%;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* === AUTOCOMPLETE ITEMS (Base) === */
.autocomplete-item {
    padding: 12px 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 15px;
}

.autocomplete-item .left-content {
    flex: 1;
    text-align: left;
}

.autocomplete-item .right-content {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background: #f8f9fa;
}


.autocomplete-item:hover:not(.selected) {
    background: rgba(128, 128, 128, 0.08);
}

.autocomplete-item.selected {
    background: rgba(0, 0, 0, 0.05);
    border-left: 2px solid rgba(0, 0, 0, 0.2);
}

/* Per-row "save this entry" pin. Trailing flex child, always visible: a faint
   grey "+" that brightens on hover, and a vermilion check once saved. */
/* Note: selectors are scoped under .autocomplete-dropdown to outrank the
   leaking `.search-field button` rule (vermilion box + min-width:80px). */
.autocomplete-dropdown .autocomplete-item .ac-pin-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 0;                     /* override `.search-field button { min-width:80px }` */
    height: 22px;
    padding: 0;
    margin: 0 0 0 -8px;               /* claw back most of the row's 15px flex gap */
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #c4c4c4;
    font-size: 0;                     /* kill the inherited 1rem so it can't pad the box */
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.autocomplete-dropdown .autocomplete-item .ac-pin-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--vermilion); }
.autocomplete-dropdown .autocomplete-item .ac-pin-btn.pinned { color: var(--vermilion); }
.autocomplete-dropdown .autocomplete-item .ac-pin-btn svg { display: block; width: 14px; height: 14px; }

/* Save-all clipboard, sitting next to the Search button: saves the whole open
   suggestion list to the shared saved list (read by the entry-page dictionary
   navigation). Bare icon — no box, no border, no margin, same height as the
   Search button. Identical markup in every search field; only the contrast flips
   with the surface underneath: charcoal on the white home page, white inside the
   charcoal `.site-header` of the entry and search-results pages. */
/* Scoped to beat `.search-field button` (index.css on the home page, buttons.css
   in the header) which would otherwise give this a filled box, a min-width and a
   full-height border. */
.search-field .header-clip-btn {
    position: relative;           /* anchor for the saved-count badge */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;          /* same height as the Search button */
    flex: 0 0 auto;
    min-width: 0;                 /* override `.search-field button { min-width: 80px }` */
    margin: 0;
    padding: 0 8px;
    color: var(--charcoal);       /* light surface: dark icon on white */
    background: transparent;      /* never the Search button's fill */
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: color 0.15s ease, opacity 0.15s ease;
}
/* Charcoal site header: same icon, opposite contrast. */
.site-header .search-field .header-clip-btn { color: #fff; }
/* Saved-count badge in the top-right corner of the clipboard icon. */
.search-field .header-clip-btn .header-clip-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--vermilion);
    border-radius: 8px;
    pointer-events: none;         /* clicks pass through to the button */
}
.search-field .header-clip-btn .header-clip-badge[hidden] { display: none; }
/* Hover: vermilion on the light surface; in the header the icon stays white and
   just fades, since vermilion would clash with the Search button beside it. */
.search-field .header-clip-btn:hover { color: var(--vermilion); background: transparent; }
.site-header .search-field .header-clip-btn:hover { color: #fff; background: transparent; opacity: 0.7; }
.search-field .header-clip-btn.saved { opacity: 0.4; }   /* brief flash on save */
/* Nothing to save (no open results, or all already saved): brief red shake so the
   click isn't silently ignored. Mirrors the nav-panel save-all's red feedback. */
.search-field .header-clip-btn.empty { color: var(--vermilion); animation: header-clip-empty 0.4s ease; }
@keyframes header-clip-empty {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-2px); }
    75%      { transform: translateX(2px); }
}
/* Bigger clipboard icon, thinner strokes, without growing the button. */
.search-field .header-clip-btn svg { display: block; width: 30px; height: 30px; stroke-width: 1.4; }

/* === CONTENT STYLING: LEMMA (ALWAYS BOLD) === */
/* All lemma/entry names are styled consistently */
.autocomplete-item .lemma,
.autocomplete-item .lemma-root,
.autocomplete-item .lemma-pos,
.autocomplete-item .lemma-def {
    font-weight: bold;
    color: #333;
    font-size: 1em;
    flex-shrink: 0;
    font-style: var(--akkadian-font-style);
}

/* Entry numbers (roman numerals) should not be italic */
.autocomplete-item .entry-number {
    font-style: normal;
}

/* Also apply to AHw lemma and variant elements */
.ahw-lemma .entry-number,
.ahw-variant .entry-number {
    font-style: normal;
}

/* === CONTENT STYLING: DEFINITION (Base) === */
.autocomplete-item .definition,
.autocomplete-item .definition-highlight, 
.derived-stem {
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    margin-bottom: 0px;
}

.definition {
    text-align: end;
}

/* Rows built from bare spans - "form → lemma" (variants, gram forms, logograms, LAD
   numbers), root and POS rows - have no growing .left-content, so space-between set
   their meaning midway between the form and the trailing save pin. The meaning takes
   the free space instead and ends at the right edge, as in a plain lemma row. */
.autocomplete-item > .definition {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}

/* === SELECTED STATES (Unchanged) === */
.autocomplete-item.selected .lemma,
.autocomplete-item.selected .lemma-root,
.autocomplete-item.selected .lemma-pos,
.autocomplete-item.selected .lemma-def {
    color: #333;
}

.autocomplete-item.selected .definition,
.autocomplete-item.selected .definition-highlight {
    color: #555;
}



/* ----------------------------------------------------- */
/* === ROOT AUTOCOMPLETE STYLING (MODIFIED) === */
/* Removed specific background, simplified layout, highlighted the root text. */
.autocomplete-item.root-suggestion {
    /* Removed background: #f8f9ff; */
    /* Use default two-column layout: Lemma (POS) | Definition */
    justify-content: space-between; 
}

.autocomplete-item.root-suggestion .root-display {
    /* Highlight the root display *within* the lemma-root element for visibility */
    font-weight: bold;
    color: var(--vermilion); /* Use a strong color to mark the root */
    font-size: 0.9em;
    margin-right: 5px;
}

.autocomplete-item.root-suggestion .lemma-root {
    /* Concatenate root and lemma in the display line, make the root stand out */
    font-weight: bold;
    color: #333;
    flex-shrink: 0;
    /* Use margin-right from .autocomplete-item .lemma selector */
}

/* Ensure selected root items use the general selected style */
.autocomplete-item.root-suggestion.selected {
    background: rgba(0, 0, 0, 0.05);
    border-left: 2px solid rgba(0, 0, 0, 0.2);
}
/* ----------------------------------------------------- */

/* === DOMAIN AUTOCOMPLETE STYLING (table-like: domain | entry | meaning) === */
/* Grid (not flex) so the three columns line up across every row. minmax(0,…)
   lets cells shrink so long values ellipsis instead of pushing columns. */
.autocomplete-item.domain-suggestion {
    display: grid;
    /* 4th column holds the per-row "save" pin so it stays on the same line */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) auto;
    align-items: center;
    gap: 12px;
}
.autocomplete-item.domain-suggestion .domain-display {
    grid-column: 1;
    text-align: left;
    font-weight: bold;
    color: var(--vermilion); /* mark the matched semantic domain */
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.autocomplete-item.domain-suggestion .lemma-domain {
    grid-column: 2;
    text-align: left;
    font-weight: bold;
    color: #333;
    font-style: var(--akkadian-font-style);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.autocomplete-item.domain-suggestion .definition {
    grid-column: 3;
    text-align: right;
}
.autocomplete-item.domain-suggestion.selected {
    background: rgba(0, 0, 0, 0.05);
    border-left: 2px solid rgba(0, 0, 0, 0.2);
}
/* ----------------------------------------------------- */

/* === FACET VALUE PICKER (typing "domain:" / "topic:" lists available values) === */
/* Also the count strip at the top of every dropdown: "12 entries", "3 domains",
   "5 attestations in 2 entries". `text-align` is explicit because the header would
   otherwise inherit it: the home page centred it (`.search-container` in index.css)
   while the entry page and the results page left-aligned it. */
.facet-list-header {
    padding: 6px 12px;
    text-align: center;
    font-size: 0.78em;
    color: #888;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.autocomplete-item.facet-value-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.autocomplete-item.facet-value-item .facet-value {
    color: var(--vermilion);
    font-weight: bold;
}
.autocomplete-item.facet-value-item .facet-count {
    color: #999;
    font-size: 0.85em;
    flex-shrink: 0;
    margin-left: 8px;
}
.autocomplete-item.facet-value-item.selected {
    background: rgba(0, 0, 0, 0.05);
}
/* ----------------------------------------------------- */


/* === DEFINITION HIGHLIGHT STYLING === */
/* All definition highlights use the base definition color/font-weight */
.autocomplete-item .definition-highlight, .derived-stem {
    font-weight: 500;
    margin-right: 5px;

}

.pos {
    color: #666;
    font-weight: normal;
    margin-left: 3px;
    vertical-align: baseline;
}

/* === VARIANT AUTOCOMPLETE STYLING === */
.autocomplete-item.variant-suggestion .variant-display {
    font-weight: bold;
    color: var(--vermilion);
    font-size: 0.95em;
    font-style: var(--akkadian-font-style);
}

/* Non-standard spelling (orth/@ana "nonStandard"): findable, never shown on the entry
   page, and set in square brackets here - "[nadimmu]" - so it does not read as a form
   to cite. The brackets are upright, as editorial brackets are everywhere else. Same
   markup on the full results page (search-results.xsl). */
.nonstandard-variant .bracket-mark {
    font-style: normal;
}

/* LAD number match ("LAD014950 → tarpi"): the number is an identifier, not Akkadian,
   so it drops the italic and reads like the .entry-idno badge in the navigation panel. */
.autocomplete-item .lad-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 0.9em;
}

/* Gram form gloss (e.g. "pl. fem.") shown in normal weight within bold variant display */
.autocomplete-item.variant-suggestion .variant-display .gram-gloss {
    font-weight: normal;
}

/* === LOGOGRAM AUTOCOMPLETE STYLING === */
/* Uses same styling as variant - capital letters distinguish it */
.autocomplete-item.logogram-suggestion .logogram-display {
    font-weight: bold;
    color: var(--vermilion);
    font-size: 0.95em;
}

/* === DELETED ENTRY STYLING === */
/* Strikethrough for deleted entries in autocomplete dropdown */
/* Exclude .ahw-right/.cad-right to prevent LAD info from being struck through */
.autocomplete-item.deleted-entry > .lemma,
.autocomplete-item.deleted-entry > .left-content > .lemma,
.autocomplete-item.deleted-entry .lemma-root,
.autocomplete-item.deleted-entry .lemma-pos,
.autocomplete-item.deleted-entry .variant-display .lemma,
.autocomplete-item.deleted-entry .logogram-display .lemma {
    text-decoration: line-through;
    text-decoration-color: #c00;
    color: rgba(51, 51, 51, 0.6);
}

/* === AHW AUTOCOMPLETE STYLING === */
.autocomplete-item.ahw-suggestion {
    background: linear-gradient(to right, rgba(70, 130, 180, 0.05), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.autocomplete-item.ahw-suggestion:hover,
.autocomplete-item.ahw-suggestion.selected {
    background: linear-gradient(to right, rgba(70, 130, 180, 0.12), rgba(128, 128, 128, 0.08));
}

/* Left side: AHw badge + entry + meaning */
.ahw-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ahw-badge {
    display: inline-block;
    background: #4682b4;
    color: white;
    font-size: 0.7em;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.ahw-supplement-badge {
    display: inline-block;
    font-size: 0.65em;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 3px;
    color: white;
    letter-spacing: 0.3px;
}

.ahw-supplement-badge.bun {
    background-color: #e8a317;
}

.ahw-supplement-badge.sn {
    background-color: #6b7280;
}

.ahw-suggestion .arrow {
    color: #666;
}

.ahw-lemma,
.ahw-variant {
    font-weight: 500;
    font-style: var(--akkadian-font-style);    
}

.ahw-lemma.deleted,
.ahw-variant.deleted {
    text-decoration: line-through;
    text-decoration-color: #c00;
    color: rgba(51, 51, 51, 0.6);
    font-style: var(--akkadian-font-style);
}

/* Phonological pattern hint (e.g. Geers' Law): "qaṣ- not attested → kaṣ.., gaṣ.." */
.ahw-lemma.not-attested {
    text-decoration: line-through;
    text-decoration-color: #c00;
    color: rgba(51, 51, 51, 0.6);
    font-style: var(--akkadian-font-style);
}

/* Phonological variant (e.g. qe.. -> qi..): the form IS attested, it is simply
   written elsewhere - so it is muted like the Geers' Law source but NOT struck through. */
.ahw-lemma.phon-variant-source {
    color: rgba(51, 51, 51, 0.6);
    font-style: var(--akkadian-font-style);
}

.pattern-alts .pattern-alt {
    font-style: var(--akkadian-font-style);
    color: #0066cc;
    cursor: pointer;
}

.pattern-alts .pattern-alt:hover {
    text-decoration: underline;
}

/* German qualifiers printed inside a pattern hint ("auch", "oft", "meist", "sowie") and the
   punctuation around them. These are dictionary context rather than Akkadian, so they stay
   upright even where the Akkadian around them is italic, and stay muted so the clickable
   forms remain the eye's target. */
.pattern-alts .pattern-lbl,
.pattern-alts .pattern-pc {
    font-style: normal;
    color: #666;
}

/* The editorial remark AHw prints between the headword and the arrow
   ("(qiātum) St. qí-tu [lies qīṭū] → qiāšum G I 3"). Muted like the other printed
   context above, so the headword and the clickable targets keep the eye.
   Only the Akkadian is italic: "St." and "lies" are German apparatus and stay
   upright, exactly as the page sets them. */
.ref-indication {
    color: #666;
    margin: 0 4px;
}

.ref-indication .ind-lbl,
.ref-indication .ind-usg,
.ref-indication .ind-pc,
.ref-indication .ind-txt {
    font-style: normal;
}

.ref-indication .ind-akk {
    font-style: var(--akkadian-font-style, italic);
}

.phon-rule {
    font-size: 0.78em;
    font-style: italic;
    color: #888;
    margin-left: 4px;
}

/* Right side: separator + LAD badge + entry info.
   margin-left:auto keeps it flush against the trailing pin button — the row
   also holds the .ac-pin-btn, so space-between alone would strand it mid-row. */
.ahw-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

.ahw-right .separator {
    color: #ccc;
    margin-right: 4px;
}

.lad-badge {
    display: inline-block;
    background: #2e7d32;
    color: white;
    font-size: 0.7em;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lad-badge.no-mapping {
    background: #999;
}

.no-lad {
    color: #999;
    font-style: italic;
}

/* === CAD AUTOCOMPLETE STYLING === */
.autocomplete-item.cad-suggestion {
    background: linear-gradient(to right, rgba(139, 69, 19, 0.05), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.autocomplete-item.cad-suggestion:hover,
.autocomplete-item.cad-suggestion.selected {
    background: linear-gradient(to right, rgba(139, 69, 19, 0.12), rgba(128, 128, 128, 0.08));
}

/* Left side: CAD badge + entry */
.cad-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cad-badge {
    display: inline-block;
    background: #8b4513;
    color: white;
    font-size: 0.7em;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.cad-suggestion .arrow {
    color: #666;
}

.cad-suggestion .cad-lemma,
.cad-suggestion .cad-variant {
    font-weight: 500;
    font-style: var(--akkadian-font-style) !important;
}

.cad-suggestion .cad-lemma.deleted,
.cad-suggestion .cad-variant.deleted {
    text-decoration: line-through;
    text-decoration-color: #c00;
    color: rgba(51, 51, 51, 0.6);
    font-style: var(--akkadian-font-style) !important;
}

.cad-logogram {
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.5px;
}

.cad-lemma .entry-number,
.cad-variant .entry-number {
    font-style: normal;
}

/* Right side: separator + LAD entry info.
   margin-left:auto keeps it flush against the trailing pin button (see .ahw-right). */
.cad-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

.cad-right .separator {
    color: #ccc;
    margin-right: 4px;
}

/* A lemma the LAD team deleted: one row per LAD entry its passages went to,
   "~~šurrû C~~ | → warû II" (expandLadDeletions in search.js). */
.ahw-right .lad-redirect-arrow,
.cad-right .lad-redirect-arrow {
    color: var(--note-text-color, #6c757d);
    margin-right: 2px;
}

/* ------------------------------------------- */
/* --- NON-SEARCH RESULT STYLES (Unchanged) --- */
/* ------------------------------------------- */

/* === SEARCH RESULTS === */
.search-results-list {
    margin-top: 2rem;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}

.search-results-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.search-result-item {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: white;
    border-radius: var(--entry-border-radius);
}

.result-header {
    margin-bottom: 0.75rem;
    display: block;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.result-logogram {
    font-size: 0.9rem;
    color: var(--note-text-color);
}

.result-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* === SEARCH SUMMARY === */
.search-summary {
    margin-bottom: 1.5rem;
    color: var(--charcoal);
    padding: 1rem;
    background-color: white;
    border-radius: var(--entry-border-radius);
}

.search-summary p {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.search-summary h3 {
    margin-bottom: 0.5rem;
    color: var(--charcoal);
}

.query-term {
    font-weight: bold;
    font-style: var(--italic-font-style);
    color: var(--vermilion);
}

.separator-line {
    width: 100px;
    height: 3px;
    background-color: var(--section-divider-color);
    margin: 10px 0 20px 0;
    border-radius: 2px;
}

/* === NO RESULTS === */
.search-no-results {
    text-align: center;
    padding: 2rem;
    background-color: white;

}

.no-results-message {
    color: var(--vermilion);
    margin-bottom: 1rem;
    font-style: var(--italic-font-style);
    font-size: 1.1rem;
}

.search-no-results ul {
    margin-top: 1rem;
    padding-left: 1.5rem;
    text-align: left;
    display: inline-block;
}

.search-no-results li {
    margin-bottom: 0.5rem;
    color: var(--note-text-color);
}

/* === SEARCH INFO === */
.search-info {
    margin-top: 2rem;
    text-align: center;
    padding: 1.5rem;
    background-color: var(--antiflash-white);
    border-radius: var(--entry-border-radius);
}

/* === ENHANCED KWIC STYLING WITH CHARCOAL ACCENTS === */
.kwic-results {
    margin-top: 1rem;
    border-top: 1px solid #88898b;
    padding-top: 1rem;
    border-bottom: 1px solid #88898b;
}

.kwic-header {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.entry-lemma {
    color: var(--vermilion);
    font-style: italic;
    font-size: 100%;
}

.search-highlight {
    background: none;
    padding: 0;
    border-radius: 0;
    font-weight: bold;
    color: var(--charcoal);
}

.kwic-contexts {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
}

/* === KWIC GROUPS === */
.kwic-group {
    margin-bottom: 0;
}

.kwic-group-separator {
    height: 1px;
    background-color: #dee2e6;
    margin: 1rem 0;
    border-radius: 1px;
}

.kwic-group-header {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}

.location-name {
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}

.sense-label {
    font-style: normal !important;
    font-weight: bold;
    color: #333;
}

.kwic-group-items {
    margin-left: 0;
}

/* === KWIC ITEMS === */
.kwic-item-inline {
    line-height: 1.5;
}

.kwic-item-inline .element-type {
    color: #666 !important;
    font-weight: 600;
    margin-right: 0.5rem;
    background: none;
    padding: 0;
    border-radius: 0;
    text-transform: capitalize;
}

.kwic-text {
    color: #333;
}

/* Orange highlighting for search terms (using button color) */
.kwic-text strong {
    color: #1b5e20;
    background: none;
}

/* === KWIC LINK STYLING === */
.kwic-link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
    cursor: default;
    transition: background-color 0.2s ease;
    border-radius: 3px;
}

.kwic-link:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.03);
    text-decoration: none;
}

.kwic-link:visited {
    color: inherit;
}

.kwic-link:focus {
    outline: 1px dotted #666;
    outline-offset: 2px;
}

/* Ensure all nested elements inherit the link behavior */
.kwic-link .element-type,
.kwic-link .kwic-text,
.kwic-link .language-label,
.kwic-link .original-akkadian,
.kwic-link .translation-text {
    color: inherit;
}



/* === FALLBACK CONTEXT STYLES === */
.result-contexts {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    border-top: 1px solid #dee2e6;
    padding-top: 0.75rem;
}

.context-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0.5rem;
}

.context-item {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background-color: var(--antiflash-white);
    border-radius: 4px;
}

.more-contexts {
    text-align: right;
    color: #666;
    font-size: 0.85rem;
    font-style: var(--italic-font-style);
    margin-top: 0.5rem;
}

.no-context {
    font-size: 0.9rem;
    color: var(--note-text-color);
    font-style: var(--italic-font-style);
    text-align: center;
    padding: 1rem;
}

/* === SEARCH ACTIONS === */
.result-actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--antiflash-white);
}

.result-separator {
    width: 100%;
    height: 1px;
    background-color: var(--section-divider-color);
    margin: 1.5rem 0 0.75rem 0;
}

/* === SEARCH ENTRY LINKS === */
.entry-link {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
    transition: var(--link-transition);
}

.entry-link:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

/* === SEARCH GRAMMAR INFO === */
.result-grammar {
    margin-bottom: 0.75rem;
    color: var(--note-text-color);
    font-size: 0.9rem;
    font-style: var(--italic-font-style);
}

.grammar-item {
    display: inline;
}

.grammar-separator {
    color: #999;
}

/* === ENHANCED LOCATION STYLING === */
.main-entry {
    color: var(--vermilion);
    font-weight: bold;
}

.lexical-entry {
    color: #28a745;
    font-weight: bold;
}

.etymology-entry {
    color: #6f42c1;
    font-weight: bold;
}

.citation-entry {
    color: #17a2b8;
    font-weight: bold;
}

.search-stats {
    font-size: 0.95em;
    color: #666;
    margin-top: 8px;
    margin-bottom: 12px;
}

.search-stats strong {
    color: #333;
    font-weight: 600;
}


/* === PER-DICTIONARY KWIC HIGHLIGHT COLOR ===
   Match the autocomplete badge palette:
     LAD = #2e7d32 (green), CAD = #8b4513 (brown/orange), AHw = #4682b4 (steel blue)
   Covers both inline <mark> elements in snippets and <span class="search-highlight">
   in the kwic-header summary line. */
.search-result-item[data-dictionary="lad"] mark,
.search-result-item[data-dictionary="lad"] .search-highlight {
    color: #1b5e20;
    padding: 0 0.15em;
    border-radius: 2px;
}
.search-result-item[data-dictionary="cad"] mark,
.search-result-item[data-dictionary="cad"] .search-highlight {
    color: #6b3410;
    padding: 0 0.15em;
    border-radius: 2px;
}
.search-result-item[data-dictionary="ahw"] mark,
.search-result-item[data-dictionary="ahw"] .search-highlight {
    color: #2c5e8f;
    padding: 0 0.15em;
    border-radius: 2px;
}


/* === ENTRY NUMBERING IN SEARCH RESULTS === */
.entry-number {
    display: inline-block;
    color: #999;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* === PAGE SEPARATOR (between progressively-loaded pages) === */
.page-separator {
    display: flex;
    align-items: center;
    margin: 2rem 0 1.5rem;
    color: #888;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.page-separator::before,
.page-separator::after {
    content: "";
    flex: 1;
    border-top: 1px solid #ddd;
}
.page-separator span {
    padding: 0 0.9rem;
    background-color: transparent;
}

/* === PAGINATION CONTROLS === */
.search-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e5e5e5;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    font-size: 0.95em;
    font-family: inherit;
    color: var(--charcoal);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: var(--entry-border-radius, 4px);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.pagination-btn:hover:not(:disabled),
.pagination-btn:focus-visible:not(:disabled) {
    background-color: var(--vermilion);
    border-color: var(--vermilion);
    color: white;
    outline: none;
}

.pagination-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pagination-info {
    font-size: 0.95em;
    color: #555;
    white-space: nowrap;
}

.pagination-info strong {
    color: var(--charcoal);
    font-weight: 600;
}


/* === SEARCH HELP INFO BOX === */
.search-help-container {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    margin: 10px;
}

.help-icon {
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    font-size: 16px !important;
    font-style: italic;
    font-weight: bold !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s !important;
    font-family: inherit;
    box-sizing: border-box !important;
    background: #4a90d9;
    color: white;
    cursor: pointer;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.help-icon:hover {
    background: #357abd;
}

.wildcard-info {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(calc(-35% - 10px));
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 16px;
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    display: none;
    font-size: 13px;
    line-height: 1.4;
    overscroll-behavior: contain;
}

/* Custom scrollbar for the info box */
.wildcard-info::-webkit-scrollbar {
    width: 6px;
}

.wildcard-info::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.wildcard-info::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.wildcard-info::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Arrow pointing right (for left-positioned box) */
.wildcard-info::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 9px;
    border-style: solid;
    border-color: transparent transparent transparent #ddd;
}

.wildcard-info::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent white;
}

/* Header-specific wildcard info - position below the button */
.header-center .wildcard-info {
    top: calc(100% + 10px);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

/* Arrow for header wildcard info - pointing up */
.header-center .wildcard-info::before {
    content: '';
    top: -9px;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    border-width: 9px;
    border-color: transparent transparent #ddd transparent;
}

.header-center .wildcard-info::after {
    content: '';
    top: -8px;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    border-width: 8px;
    border-color: transparent transparent white transparent;
}

.wildcard-info h3 {
    margin: 16px 0 8px 0;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 6px;
}

.wildcard-info h3:first-of-type {
    margin-top: 0;
}

.wildcard-examples {
    margin: 0 0 8px 0;
    padding: 0;
}

.wildcard-examples li {
    list-style: none;
    margin: 4px 0;
    padding: 5px 8px;
    background: #f8f9fa;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.wildcard-examples .pattern {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #d63384;
    font-size: 12px;
    flex-shrink: 0;
}

.wildcard-examples .description {
    color: #555;
    font-size: 12px;
    flex: 1;
}

.close-help {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    background: none !important;
    border: none !important;
    font-size: 18px !important;
    cursor: pointer !important;
    color: #999 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.close-help:hover {
    color: #666;
}

/* === RESPONSIVE SEARCH === */
@media (max-width: 768px) {
    .search-field {
        height: 45px;
    }

    .search-field > input,
    .search-field .autocomplete-wrapper input,
    .search-field button {
        font-size: 0.9rem;
    }

    .result-header {
        flex-direction: column;
        gap: 5px;
    }

    .kwic-text {
        font-size: 0.8rem;
        word-break: break-word;
    }
}

/* === MULTI-TARGET TOOLTIP === */
/* Persistent tooltip for reference entries with multiple targets (e.g., qaš(ā)du → qašādu | qašdu) */

.multi-target-tooltip {
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 400px;
    font-size: 0.9rem;
}

.multi-target-tooltip .tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 6px 6px 0 0;
}

.multi-target-tooltip .source-lemma {
    font-weight: 600;
    font-style: var(--akkadian-font-style);
}

.multi-target-tooltip .arrow {
    color: #666;
}

.multi-target-tooltip .tooltip-targets {
    padding: 8px 0;
}

.multi-target-tooltip .tooltip-target {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid #f0f0f0;
}

.multi-target-tooltip .tooltip-target:last-child {
    border-bottom: none;
}

.multi-target-tooltip .tooltip-target:hover {
    background-color: #f0f7ff;
}

.multi-target-tooltip .tooltip-target.linked:hover {
    background-color: #e8f5e9;
}

.multi-target-tooltip .tooltip-target.not-linked {
    opacity: 0.7;
}

.multi-target-tooltip .tooltip-target.not-linked:hover {
    background-color: #f5f5f5;
}

.multi-target-tooltip .target-lemma {
    font-weight: 600;
    font-style: var(--akkadian-font-style);
    color: #333;
}

.multi-target-tooltip .target-pos {
    color: #666;
    font-size: 0.85em;
}

.multi-target-tooltip .target-definition {
    flex: 1 1 100%;
    color: #555;
    font-size: 0.9em;
    margin-top: 4px;
    padding-left: 2px;
}

.multi-target-tooltip .not-linked-label {
    color: #999;
    font-style: italic;
    font-size: 0.85em;
}

/* Target separator in autocomplete items */
.ahw-suggestion .target-separator {
    color: #999;
    margin: 0 2px;
}

/* att: dropdown rows - reference first (in the order of the texts), then the entry's
   lemma and part of speech, then its meaning, then the pin; and the hint row shown
   while nothing matches yet */
.autocomplete-item.att-hit .att-ref {
    flex: 0 0 11em;
    font-size: 0.85em;
    color: #666;
    white-space: normal;
    line-height: 1.2;
}
.autocomplete-item.att-hit.selected .att-ref {
    color: inherit;
    opacity: 0.85;
}
.autocomplete-item.att-hint {
    font-size: 0.9em;
    color: #666;
    cursor: default;
}

/* Akkadian quoted inside a meaning.

   A definition can gloss the word it is translating - "to perform an inḫu-song" -
   and the autocomplete index ships those meanings with the <seg xml:lang="akk">
   kept, as <span class="segment lang-akk">, so the dropdown can italicise it the
   way the entry page does. The rule has to live here, not in
   page/dictionary/linguistic.css, because the home page loads search.css but not
   the dictionary sheets - the search box's first home is index.html. Same
   variable, so the two stay in step. */
.autocomplete-item .lang-akk {
    font-style: var(--akkadian-font-style);
}