/* ==========================================================================
   Tamilcube Dictionary — Frontend Styles (v2.2.0)

   Everything below consumes CSS custom properties defined in :root.
   Dark-mode overrides sit in the @media (prefers-color-scheme: dark) block
   at the bottom of the file.
   ========================================================================== */


/* ── Design tokens ───────────────────────────────────────────────────────── */

:root {
    /* ── Colour ──────────────────────────────────────────────────────────
       Primary green stays as the heritage anchor. Four bright accents give
       distinct visual identity to navigation aids, content categories, and
       grammatical metadata. Each accent has a -soft variant (rgba ~12%) for
       hover states and subtle backgrounds. */
    --tcd-color-primary:        #2a7a52;        /* brighter dictionary green */
    --tcd-color-primary-hover:  #1f5d3e;
    --tcd-color-primary-soft:   rgba(42, 122, 82, 0.10);
    --tcd-color-primary-grad:   #38a16a;        /* used in gradients */

    --tcd-color-coral:          #ff7849;        /* favourites accent / antonyms */
    --tcd-color-coral-soft:     rgba(255, 120, 73, 0.12);
    --tcd-color-teal:           #0fb5a8;        /* recent / suggestion chips */
    --tcd-color-teal-soft:      rgba(15, 181, 168, 0.12);
    --tcd-color-violet:         #7c5ce0;        /* enrichment / synonyms */
    --tcd-color-violet-soft:    rgba(124, 92, 224, 0.12);
    --tcd-color-yellow:         #ffc83d;        /* highlight pill / sense markers */
    --tcd-color-yellow-soft:    rgba(255, 200, 61, 0.16);

    --tcd-color-accent:         #c41e3a;        /* warm Tamil red — kept for WotD + reverse-lookup */
    --tcd-color-gold:           #ff8a3d;        /* favourites star — warmed up */
    --tcd-color-gold-soft:      rgba(255, 138, 61, 0.14);

    --tcd-color-text:           #1a1f24;
    --tcd-color-muted:          #6b7480;
    --tcd-color-surface:        #ffffff;
    --tcd-color-surface-warm:   #faf4e4;        /* warm pearl-ivory — for quickbar */
    --tcd-color-surface-pearl:  #fdf9ee;        /* lighter parchment — for alphabet pills */
    --tcd-color-border-warm:    rgba(195, 153, 90, 0.32);  /* gold-tinted border for warm surfaces */
    --tcd-color-bg-soft:        #f3f8f4;
    --tcd-color-bg-grain:       #f0f6f1;        /* very faint paper tint */

    /* Cell zebra striping: warm cream alternating with soft mint. Both are
       low-saturation (~3 %) so Tamil text + the yellow highlight stay legible. */
    --tcd-cell-warm:            #fdf9f0;        /* parchment cream */
    --tcd-cell-cool:            #ecf6ed;        /* soft mint */
    --tcd-cell-hover:           #dceedd;        /* brighter mint on hover */
    --tcd-cell-header:          #dbeadb;        /* visible green-tinted header */

    /* Tinted search-box background (v2.8.1 — deeper saturation across three
       stops: warm peach → soft cream → mint, so the hero reads as a vibrant
       glassy pill rather than a white-ish rectangle). */
    --tcd-search-bg-start:      #ffe6b8;
    --tcd-search-bg-mid:        #fff4d6;
    --tcd-search-bg-end:        #c8e8d2;

    --tcd-color-border:         #e0e6df;
    --tcd-color-border-strong:  #c8d1c8;
    --tcd-color-highlight-bg:     #fff2c2;        /* sunny yellow pill (legacy, unused since v2.3.9) */
    --tcd-color-highlight-text:   #3d2400;        /* warm dark brown for highlighted text */
    --tcd-color-highlight-stroke: rgba(255, 200, 61, 0.55); /* highlighter-pen yellow */
    --tcd-color-link:           #2a7a52;
    --tcd-color-link-hover:     #1f5d3e;
    --tcd-color-danger:         #b3261e;
    --tcd-color-info:           #0a58ca;

    /* POS badges — one tinted background + matching text for each class */
    --tcd-pos-noun-bg:   #e0ecff;   --tcd-pos-noun-fg:   #1d4ed8;
    --tcd-pos-verb-bg:   #d7f0e0;   --tcd-pos-verb-fg:   #166534;
    --tcd-pos-adj-bg:    #e8e0fc;   --tcd-pos-adj-fg:    #5b3fbf;
    --tcd-pos-adv-bg:    #ffe4d4;   --tcd-pos-adv-fg:    #b94015;
    --tcd-pos-pron-bg:   #cef2ee;   --tcd-pos-pron-fg:   #0c7f76;
    --tcd-pos-other-bg:  #e6e8eb;   --tcd-pos-other-fg:  #475467;

    /* Radius */
    --tcd-radius-sm: 6px;
    --tcd-radius-md: 10px;
    --tcd-radius-lg: 14px;
    --tcd-radius-pill: 999px;

    /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48) */
    --tcd-space-1: 4px;
    --tcd-space-2: 8px;
    --tcd-space-3: 12px;
    --tcd-space-4: 16px;
    --tcd-space-5: 24px;
    --tcd-space-6: 32px;
    --tcd-space-7: 48px;

    /* Typography */
    --tcd-font-ui:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* v2.7.5: Tiro Tamil (serif, by Tiro Typeworks/John Hudson) — scholarly,
       book-like feel that suits a dictionary. Noto Sans Tamil is the fallback
       for any character Tiro doesn't cover. Tiro ships only weight 400 +
       italic; .tcd-highlight drops its bold weight accordingly (see below). */
    --tcd-font-tamil: "Tiro Tamil", "Noto Sans Tamil", "Hind Madurai", "Latha", system-ui, serif;
    --tcd-fs-xs:    0.78rem;
    --tcd-fs-sm:    0.88rem;
    --tcd-fs-base:  1rem;
    --tcd-fs-md:    1.0625rem;
    --tcd-fs-lg:    1.2rem;
    --tcd-fs-xl:    1.5rem;
    --tcd-fs-tamil-base: 1.05rem;     /* Tamil reads better slightly larger */
    --tcd-lh-tight: 1.25;
    --tcd-lh-base:  1.55;
    --tcd-lh-tamil: 1.8;

    /* Shadows */
    --tcd-shadow-soft: 0 2px 12px rgba(15, 30, 25, 0.06);
    --tcd-shadow-lift: 0 6px 22px rgba(15, 30, 25, 0.10);
    --tcd-shadow-focus: 0 0 0 4px rgba(30, 79, 58, 0.15);

    /* Transitions */
    --tcd-transition-fast: 100ms ease-out;
    --tcd-transition-base: 160ms ease;
}


/* ── Base / scope ────────────────────────────────────────────────────────── */

.tcd-search-wrapper,
.tcd-favorites-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--tcd-space-3) 0;
    font-family: var(--tcd-font-ui);
    color: var(--tcd-color-text);
    font-size: var(--tcd-fs-base);
    line-height: var(--tcd-lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

/* Faint paper-grain backdrop — almost invisible, but adds tactile warmth */
.tcd-search-wrapper::before,
.tcd-favorites-wrapper::before {
    content: "";
    position: absolute;
    inset: -16px -8px;
    background-image:
        radial-gradient(rgba(42, 122, 82, 0.045) 1px, transparent 1px),
        radial-gradient(rgba(255, 120, 73, 0.035) 1px, transparent 1px);
    background-size: 24px 24px, 48px 48px;
    background-position: 0 0, 12px 12px;
    pointer-events: none;
    z-index: -1;
    border-radius: var(--tcd-radius-lg);
}


/* ── Quick-access panel (above search) — groups Recent strip + favourites
   link into one soft tray so they don't float loose against the page bg. ── */

.tcd-quickbar {
    max-width: 720px;
    /* v2.9.11 — centre within the 800px .tcd-search-wrapper so the panel
       sits at the same x-position as the sibling .tcd-alpha-wrapper
       (also 720px, also auto-centred). Without this the quickbar
       left-aligns inside the 800px wrapper while the alphabet block
       centres in the page, producing a visible 40px offset. */
    margin: 0 auto var(--tcd-space-3);
    padding: var(--tcd-space-2) var(--tcd-space-3);
    /* Warm pearl-ivory — Direction A v2.5.4. Complements the search hero
       (deeper cream) and the alphabet pills (lighter parchment) without
       any of them reading as plain white-on-page. */
    background: var(--tcd-color-surface-warm);
    border: 1px solid var(--tcd-color-border-warm);
    border-radius: var(--tcd-radius-lg);
    box-shadow: var(--tcd-shadow-soft);
}

.tcd-quickbar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tcd-space-2);
    min-height: 28px;
}

/* When the head row only contains the favourites link (no recent label visible),
   keep it right-aligned naturally via the flex spacer effect of justify-content. */
.tcd-quickbar--no-favs .tcd-quickbar-head { justify-content: flex-start; }


/* Right cluster inside the quickbar head — favourites link + help button.
   Lays them out side-by-side with a small gap. */
.tcd-quickbar-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--tcd-space-2);
}


/* ── Help button (?) — opens the Tips & shortcuts modal ──────────────────── */
/*
 * v2.8.8 — bright coral background replaces the muted white pill. The button
 * now reads as a deliberate accent against the warm-pearl quickbar rather
 * than a neutral icon. Coral is distinct from primary green (search button)
 * and the gold of the favourites link, so it doesn't compete with either.
 * A small pulse dot at the top-right announces the button to first-time
 * visitors; it clears on first click (or page-reload after the click).
 */

.tcd-help-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tcd-color-coral) 0%, var(--tcd-color-gold) 100%);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 120, 73, 0.32);
    transition: background var(--tcd-transition-base), transform var(--tcd-transition-base), box-shadow var(--tcd-transition-base);
}

.tcd-help-btn:hover,
.tcd-help-btn:focus-visible {
    background: linear-gradient(135deg, #ff5a2a 0%, var(--tcd-color-coral) 60%, var(--tcd-color-gold) 100%);
    box-shadow: 0 4px 14px rgba(255, 120, 73, 0.45);
    transform: scale(1.10);
    outline: none;
}

/* Pulsing hint dot for first-time visitors. The ::after pseudo handles the
   solid coral dot; ::before paints the expanding pulse ring. Both clear
   when .has-hint is removed (first click of the ? button). */
.tcd-help-btn-hint {
    display: none;
}

.tcd-help-btn.has-hint .tcd-help-btn-hint {
    display: block;
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--tcd-color-surface-warm);
    border-radius: 50%;
    background: var(--tcd-color-coral);
    box-shadow: 0 0 0 0 rgba(255, 120, 73, 0.65);
    animation: tcd-help-pulse 1.6s ease-out infinite;
}

@keyframes tcd-help-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(255, 120, 73, 0.65); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 120, 73, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(255, 120, 73, 0);    }
}

@media (prefers-reduced-motion: reduce) {
    .tcd-help-btn.has-hint .tcd-help-btn-hint {
        animation: none;
        box-shadow: 0 0 0 4px rgba(255, 120, 73, 0.35);
    }
}


/* ── Help modal (centered card + backdrop) ───────────────────────────────── */

.tcd-help-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--tcd-space-4);
}

.tcd-help-modal.is-open {
    display: flex;
}

.tcd-help-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 25, 22, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: tcd-fade-in 180ms ease-out;
}

.tcd-help-panel {
    position: relative;
    max-width: 520px;
    width: 100%;
    max-height: calc(100vh - var(--tcd-space-6));
    margin-top: 6vh;
    background: var(--tcd-color-surface);
    border: 1px solid var(--tcd-color-border);
    border-radius: var(--tcd-radius-lg);
    box-shadow: var(--tcd-shadow-lift);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: tcd-help-pop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes tcd-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes tcd-help-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.tcd-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tcd-space-3);
    padding: var(--tcd-space-3) var(--tcd-space-4);
    border-bottom: 1px solid var(--tcd-color-border);
    background: linear-gradient(180deg, var(--tcd-color-bg-soft) 0%, var(--tcd-color-surface) 100%);
}

.tcd-help-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tcd-color-text);
    letter-spacing: 0.005em;
}

.tcd-help-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tcd-color-muted);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base);
}

.tcd-help-close:hover,
.tcd-help-close:focus-visible {
    background: var(--tcd-color-primary-soft);
    color: var(--tcd-color-primary);
    outline: none;
}

.tcd-help-list {
    list-style: none;
    margin: 0;
    padding: var(--tcd-space-3) var(--tcd-space-4);
    overflow-y: auto;
}

.tcd-help-item {
    display: flex;
    align-items: flex-start;
    gap: var(--tcd-space-3);
    padding: var(--tcd-space-3) 0;
    border-bottom: 1px dashed var(--tcd-color-border);
}

.tcd-help-item:last-child {
    border-bottom: 0;
}

.tcd-help-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tcd-color-primary-soft);
    color: var(--tcd-color-primary);
    font-size: 0.92rem;
}

.tcd-help-icon--star    { background: var(--tcd-color-gold-soft);   color: var(--tcd-color-gold); }
.tcd-help-icon--chevron { background: var(--tcd-color-primary);     color: #fff; }
.tcd-help-icon--copy    { background: var(--tcd-color-teal-soft);   color: #096860; }
.tcd-help-icon--voice   { background: var(--tcd-color-coral-soft);  color: var(--tcd-color-coral); }
.tcd-help-icon--share   { background: var(--tcd-color-violet-soft); color: var(--tcd-color-violet); }

.tcd-help-body h3 {
    margin: 0 0 2px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tcd-color-text);
}

.tcd-help-body p {
    margin: 0;
    font-size: var(--tcd-fs-sm);
    color: var(--tcd-color-muted);
    line-height: 1.5;
}

.tcd-help-body kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--tcd-color-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--tcd-radius-sm);
    background: var(--tcd-color-bg-soft);
    color: var(--tcd-color-text);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1;
}

.tcd-help-foot {
    display: flex;
    justify-content: flex-end;
    padding: var(--tcd-space-3) var(--tcd-space-4);
    border-top: 1px solid var(--tcd-color-border);
    background: var(--tcd-color-bg-soft);
}

.tcd-help-ok {
    padding: 7px 18px;
    border: 0;
    border-radius: var(--tcd-radius-pill);
    background: var(--tcd-color-primary);
    color: #fff;
    font-size: var(--tcd-fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tcd-transition-base), transform var(--tcd-transition-base);
}

.tcd-help-ok:hover,
.tcd-help-ok:focus-visible {
    background: var(--tcd-color-primary-hover, #1f5e3e);
    outline: none;
    transform: translateY(-1px);
}

/* Prevent page scroll while the modal is open. */
body.tcd-help-open {
    overflow: hidden;
}


/* ── Favourites link (lives inside .tcd-quickbar-head) ───────────────────── */

.tcd-favorites-link {
    display: inline-flex;
    align-items: center;
    gap: var(--tcd-space-1);
    padding: 5px var(--tcd-space-3);
    border-radius: var(--tcd-radius-pill);
    background: var(--tcd-color-gold-soft);
    border: 1px solid rgba(255, 138, 61, 0.32);
    color: #a23e10;
    font-size: var(--tcd-fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--tcd-transition-base), transform var(--tcd-transition-base);
}

.tcd-favorites-link:hover {
    background: rgba(255, 138, 61, 0.22);
    color: #7a2a05;
    transform: translateY(-1px);
    text-decoration: none;
}

.tcd-favorites-link-star {
    color: var(--tcd-color-gold);
    font-size: var(--tcd-fs-md);
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(255, 138, 61, 0.4));
}


/* ── Recent searches strip (lives inside .tcd-quickbar below the head) ─── */

.tcd-recent {
    margin: var(--tcd-space-2) 0 0;
    font-size: var(--tcd-fs-sm);
    color: var(--tcd-color-muted);
}

.tcd-recent-label {
    font-size: var(--tcd-fs-sm);
    font-weight: 600;
    color: var(--tcd-color-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tcd-recent-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--tcd-space-2);
}

.tcd-recent-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--tcd-space-1);
    padding: 4px 6px 4px 12px;
    background: var(--tcd-color-teal-soft);
    border: 1px solid rgba(15, 181, 168, 0.28);
    border-radius: var(--tcd-radius-pill);
    color: #096860;
    text-decoration: none;
    font-size: var(--tcd-fs-sm);
    font-weight: 500;
    transition: background var(--tcd-transition-base), box-shadow var(--tcd-transition-base), transform var(--tcd-transition-base);
}

.tcd-recent-chip:hover {
    background: rgba(15, 181, 168, 0.22);
    box-shadow: var(--tcd-shadow-soft);
    transform: translateY(-1px);
    color: #074d47;
    text-decoration: none;
}

.tcd-recent-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--tcd-color-muted);
    font-size: 0.7rem;
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base);
}

.tcd-recent-chip-remove:hover {
    background: var(--tcd-color-border-strong);
    color: var(--tcd-color-danger);
}


/* ── Hero search ─────────────────────────────────────────────────────────── */

.tcd-search-form {
    margin: 0;
}

.tcd-search-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 720px;
    /* v2.9.11 — same centring fix as .tcd-quickbar above. The 720px hero
       sits inside the 800px .tcd-search-wrapper; without margin auto it
       would left-align and end up 40px to the left of the auto-centred
       .tcd-alpha-wrapper sibling below. */
    margin-left: auto;
    margin-right: auto;
    /* v2.8.1 — three-stop saturated gradient (peach → cream → mint) for a
       distinctively warm, glassy pill instead of the previous near-white
       wash. Inset highlight along the top edge adds depth. */
    background:
        linear-gradient(
            135deg,
            var(--tcd-search-bg-start) 0%,
            var(--tcd-search-bg-mid)   50%,
            var(--tcd-search-bg-end)   100%
        );
    border: 1.5px solid rgba(195, 153, 90, 0.55);
    border-radius: var(--tcd-radius-pill);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(120, 92, 36, 0.08),
        0 8px 26px rgba(15, 30, 25, 0.12),
        0 0 0 5px rgba(255, 200, 61, 0.08);
    padding: 5px 7px 5px 5px;
    transition: box-shadow var(--tcd-transition-base), border-color var(--tcd-transition-base), transform var(--tcd-transition-base);
}

.tcd-search-hero:focus-within {
    border-color: var(--tcd-color-primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        var(--tcd-shadow-focus),
        0 10px 30px rgba(15, 30, 25, 0.14);
    transform: translateY(-1px);
}

/* Input sits on a transparent surface so the gradient shows through. The
   stronger font weight + colour bumps in v2.8.1 give the placeholder + caret
   real presence against the new saturated background. */
.tcd-search-input {
    font-weight: 500;
}

/* v2.9.10 — Google-pattern: magnifier sits absolute-positioned INSIDE
   the input's left padding, so the icon + text read as one visual unit
   instead of two adjacent flex cells. The input's padding-left (set
   below) leaves 40px of clearance so text never collides with the icon.
   Still pointer-events: none + aria-hidden — purely decorative; the
   autofocus attribute on the input handles initial focus and tapping
   inside the input field handles refocus. */
.tcd-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--tcd-color-muted);
    font-size: 0.95rem;
    pointer-events: none;
    z-index: 1;
}

/* v2.9.10 — `input.tcd-search-input` (tag+class, specificity 0,1,1) beats
   Bootstrap's `.form-control` (specificity 0,1,0) regardless of load
   order, so the input visually inherits the pill's gradient surface
   instead of rendering as a nested white box with its own focus ring.
   padding-left: 44px reserves space for the absolute-positioned
   magnifier (16px left + 22px icon + 6px gap). */
input.tcd-search-input,
input.tcd-search-input:focus,
input.tcd-search-input:focus-visible {
    flex: 1;
    min-width: 0;
    height: 44px;
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
    padding: 0 var(--tcd-space-2) 0 44px;
    font-family: var(--tcd-font-ui);
    font-size: 1.05rem;
    color: var(--tcd-color-text);
}

.tcd-search-input::placeholder {
    color: var(--tcd-color-muted);
    opacity: 1;
}

/* v2.9.9 — input type="search" adds a default WebKit/Blink × cancel
   button inside the field. We already render our own .tcd-search-clear,
   so suppress the browser default to avoid two × buttons. */
.tcd-search-input::-webkit-search-cancel-button,
.tcd-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* v2.9.9 — .tcd-search-btn rules removed. The green submit button was
   dropped from the template in favour of Google-style Enter-to-submit
   (Enter on desktop + the mobile keyboard's "Search" key, enabled by
   <input type="search">). The Enter-keypress handler at
   tcd-frontend.js:118 remains the single submit path. */


/* ── jQuery UI autocomplete dropdown ─────────────────────────────────────── */

.ui-autocomplete {
    z-index: 9999 !important;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--tcd-color-surface);
    color: var(--tcd-color-text);                   /* v2.7.2 — was missing; jQuery UI's default dark text became invisible on the dark-mode surface */
    border: 1px solid var(--tcd-color-border);
    border-radius: var(--tcd-radius-md);
    box-shadow: var(--tcd-shadow-lift);
    font-size: var(--tcd-fs-sm);
    font-family: var(--tcd-font-ui);
    padding: var(--tcd-space-1) 0;
}

.ui-menu-item-wrapper {
    padding: var(--tcd-space-2) var(--tcd-space-4);
    color: var(--tcd-color-text);                   /* v2.7.2 — ditto on the per-item wrapper */
    cursor: pointer;
    transition: background var(--tcd-transition-fast);
}

.ui-menu-item-wrapper:hover,
.ui-menu-item-wrapper.ui-state-active {
    background: var(--tcd-color-primary);
    color: #fff;
    border: 0;
}


/* ── Status / info / suggestions ─────────────────────────────────────────── */

.tcd-status {
    max-width: 720px;
    margin: var(--tcd-space-3) 0;
    padding: var(--tcd-space-2) var(--tcd-space-3);
    border-radius: var(--tcd-radius-sm);
    font-size: var(--tcd-fs-sm);
    background: var(--tcd-color-bg-soft);
    color: var(--tcd-color-text);
    border: 1px solid var(--tcd-color-border);
}

/* v2.11.0 — Multi-word fallback notice. Surfaces above .tcd-search-info
   when the server's phrase search returned zero results and it auto-re-
   ran with the first word ("Showing N results for X instead"). Warm
   amber tint differentiates it from the regular results header without
   reading as an error. */
.tcd-search-fallback-notice {
    padding: var(--tcd-space-2) var(--tcd-space-3);
    margin: var(--tcd-space-4) 0 var(--tcd-space-2);
    background: #fff7e6;
    border: 1px solid #f0c97a;
    border-left: 4px solid #d99a2e;
    border-radius: var(--tcd-radius-md);
    font-size: var(--tcd-fs-sm);
    color: #6b4a0e;
    line-height: 1.5;
}
.tcd-search-fallback-notice strong {
    color: #4a3206;
    font-weight: 600;
}

/* v2.11.3 — Related phrases row. Sits directly after the fallback
   notice when DataMuse /words?ml= returned dictionary-deliverable
   alternatives for the original phrase. Lighter amber to read as a
   continuation of the fallback context rather than a separate notice. */
.tcd-related-phrases {
    padding: var(--tcd-space-2) var(--tcd-space-3);
    margin: calc(var(--tcd-space-2) * -1) 0 var(--tcd-space-2);
    background: #fffaf0;
    border: 1px solid #f0c97a;
    border-top: 0;
    border-left: 4px solid #d99a2e;
    border-radius: 0 0 var(--tcd-radius-md) var(--tcd-radius-md);
    font-size: var(--tcd-fs-sm);
    color: #6b4a0e;
    line-height: 1.6;
}
.tcd-related-phrases-label {
    font-weight: 600;
    margin-right: var(--tcd-space-2);
    color: #4a3206;
}
.tcd-related-phrase-chip {
    display: inline-block;
    margin: 2px 4px 2px 0;
    /* .tcd-suggestion-link styles handle the rest (background, hover,
       padding, etc.) so the chip matches Did-you-mean chips elsewhere. */
}


/* Results toolbar — unified row at the top of the table that holds the
   "N results for X" summary on the left and the length-menu select on the
   right. The length menu is moved here from .dataTables_wrapper by JS. */
.tcd-search-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tcd-space-2) var(--tcd-space-3);
    padding: var(--tcd-space-2) var(--tcd-space-3);
    margin: var(--tcd-space-4) 0 var(--tcd-space-2);
    background: var(--tcd-color-surface);
    border: 1px solid var(--tcd-color-border);
    border-radius: var(--tcd-radius-md);
    font-size: var(--tcd-fs-sm);
    color: var(--tcd-color-muted);
}

.tcd-search-info-text {
    display: inline-flex;
    align-items: center;
    gap: var(--tcd-space-2);
    flex-wrap: wrap;
}

.tcd-search-info-icon {
    color: var(--tcd-color-primary);
    font-size: 0.9rem;
}

.tcd-search-info-count {
    display: inline-block;
    padding: 1px 9px;
    border-radius: var(--tcd-radius-pill);
    background: var(--tcd-color-primary-soft);
    color: var(--tcd-color-primary);
    font-weight: 700;
    font-size: var(--tcd-fs-sm);
    letter-spacing: 0.01em;
}

.tcd-search-info-term {
    color: var(--tcd-color-text);
    font-weight: 600;
}

/* Length menu ("Per page _MENU_") — moved into .tcd-search-info by JS. */
.tcd-search-info .dataTables_length {
    margin: 0;
}

.tcd-search-info .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: var(--tcd-space-2);
    margin: 0;
    font-size: var(--tcd-fs-sm);
    font-weight: 500;
    color: var(--tcd-color-muted);
}

.tcd-search-info .dataTables_length select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 4px 26px 4px 10px;
    border: 1px solid var(--tcd-color-border);
    border-radius: var(--tcd-radius-sm);
    background-color: var(--tcd-color-surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237a857f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,2 6,6 10,2'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
    color: var(--tcd-color-text);
    font-size: var(--tcd-fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--tcd-transition-base), box-shadow var(--tcd-transition-base);
}

.tcd-search-info .dataTables_length select:hover {
    border-color: var(--tcd-color-border-strong);
}

.tcd-search-info .dataTables_length select:focus {
    outline: none;
    border-color: var(--tcd-color-primary);
    box-shadow: var(--tcd-shadow-focus);
}

.tcd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tcd-suggestions {
    font-size: var(--tcd-fs-sm);
    color: var(--tcd-color-muted);
    margin-bottom: var(--tcd-space-3);
}

.tcd-suggestion-link {
    display: inline-block;
    margin: 0 var(--tcd-space-2) var(--tcd-space-1) 0;
    padding: 3px var(--tcd-space-3);
    background: var(--tcd-color-coral-soft);
    border: 1px solid rgba(255, 120, 73, 0.32);
    border-radius: var(--tcd-radius-pill);
    color: #a83e15;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base), transform var(--tcd-transition-base);
}

.tcd-suggestion-link:hover {
    background: rgba(255, 120, 73, 0.22);
    color: #7a2a08;
    transform: translateY(-1px);
    text-decoration: none;
}


/* ── Search-term highlight ───────────────────────────────────────────────── */

.tcd-highlight {
    /* Modern highlighter-pen-stroke (v2.3.9) — yellow appears only across
       the lower ~45 % of the text height via a hard-stop linear gradient,
       semi-transparent so the underlying surface shows through. The stroke
       plus warm dark text colour give two-way emphasis without the blocky
       rectangle look of a solid background.
       Zero horizontal padding so the stroke ends exactly at the matched
       character boundaries — preserves the v2.3.1 word-split fix.
       v2.7.5: dropped font-weight: 700 since Tiro Tamil ships only weight
       400 and synthetic bolding distorts Tamil glyphs. The yellow stroke +
       text colour are strong enough emphasis on their own. */
    display: inline;
    padding: 1px 0;
    background-image: linear-gradient(
        180deg,
        transparent 0%,
        transparent 55%,
        var(--tcd-color-highlight-stroke) 55%,
        var(--tcd-color-highlight-stroke) 100%
    );
    color: var(--tcd-color-highlight-text);
}


/* ── Results table ───────────────────────────────────────────────────────── */

.tcd-results-container {
    margin-top: var(--tcd-space-3);
}

.tcd-table-responsive {
    overflow-x: auto;
}

#tcd-results-table,
.tcd-browse-table,
.tcd-favorites-table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--tcd-color-surface);
    border: 1px solid var(--tcd-color-border);
    border-radius: var(--tcd-radius-md);
    overflow: hidden;
}

#tcd-results-table thead th,
.tcd-browse-table thead th,
.tcd-favorites-table thead th {
    background: var(--tcd-cell-header);
    color: #1f5d3e;
    font-size: var(--tcd-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--tcd-space-3) var(--tcd-space-4);
    border-bottom: 1px solid var(--tcd-color-border);
}

/* Default cell background — odd rows get the warm cream */
#tcd-results-table tbody td,
.tcd-browse-table tbody td,
.tcd-favorites-table tbody td {
    padding: var(--tcd-space-3) var(--tcd-space-4);
    border-bottom: 1px solid var(--tcd-color-border);
    vertical-align: top;
    line-height: var(--tcd-lh-base);
    background: var(--tcd-cell-warm);
    transition: background var(--tcd-transition-base);
}

/* Even rows get the soft mint — alternating cream / mint zebra */
#tcd-results-table tbody tr:nth-child(even) td,
.tcd-browse-table tbody tr:nth-child(even) td,
.tcd-favorites-table tbody tr:nth-child(even) td {
    background: var(--tcd-cell-cool);
}

#tcd-results-table tbody tr:last-child td,
.tcd-browse-table tbody tr:last-child td,
.tcd-favorites-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Hover overrides both zebra colours with a brighter mint */
#tcd-results-table tbody tr:hover td,
.tcd-favorites-table tbody tr:hover td,
.tcd-browse-table tbody tr:hover td {
    background: var(--tcd-cell-hover);
}

/* Left-edge accent on each row (primary green; accent red for reverse-lookup rows) */
#tcd-results-table tbody tr td:first-child {
    box-shadow: inset 3px 0 0 var(--tcd-color-primary);
}
/* v2.7.6: removed the red accent that previously marked Tier-4 reverse-
   lookup rows (`tr[data-eng=""]`). The "No details" pill in the term cell
   is now signal enough — the red bar read as visual noise on pages where
   most rows are reverse-lookups. */

/* Term cell layout. No nowrap — some dictionaries (e.g. Telugu) have
   sentence-length engTerm values like "Hustings A council, a court held..."
   that would otherwise stretch the column to ~700 px and squeeze Meaning
   off-screen. Long terms wrap naturally; short terms keep aligned via
   min-width. */
.tcd-term-cell {
    font-weight: 500;
    color: var(--tcd-color-text);
    min-width: 140px;
    overflow-wrap: anywhere;
}

/* Controls gutter (Details pill + star) stays in its own column so the term
   and POS badges always wrap together as one block on the right. Fixed
   min-width prevents the term from drifting under the controls.
   v2.7.2: bumped from 60px → 120px since the chevron is now a wider
   "Details ›" labelled pill rather than a small circular icon. */
.tcd-term-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: top;
    min-width: 120px;
    flex: 0 0 auto;
}

/* Term body — wraps text + POS badges as a single inline-block so the badge
   never orphans on its own line below the term. */
.tcd-term-body {
    display: inline-block;
    vertical-align: top;
    max-width: calc(100% - 124px);
}

.tcd-term-text {
    display: inline;
    padding-left: var(--tcd-space-1);
    font-size: var(--tcd-fs-md);
}

/* v2.7.6: .tcd-term-placeholder removed. Tier-4 reverse-lookup rows used
   to render "(see meaning)" italic muted text — but that was misleading
   (the meaning column already shows the Tamil headword inside the text),
   and the "No details" pill from v2.7.3 onward already signals the
   row's nature. The term-body is now simply empty for those rows. */

/* POS badge after the term text (v2.3.7, compacted in v2.3.8). Coloured per
   part of speech using the existing --tcd-pos-* token set. Lowercase italic
   abbreviations (n., v., adj., adv. …) keep the badge subtle so the term
   remains the focal point. Multiple POS stack inline next to the term. */
.tcd-term-pos {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: var(--tcd-radius-sm);
    background: var(--tcd-pos-other-bg);
    color: var(--tcd-pos-other-fg);
    font-size: 0.72rem;
    font-weight: 600;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: 2px;
    line-height: 1.4;
}

.tcd-term-pos[data-pos="noun"]      { background: var(--tcd-pos-noun-bg);  color: var(--tcd-pos-noun-fg); }
.tcd-term-pos[data-pos="verb"]      { background: var(--tcd-pos-verb-bg);  color: var(--tcd-pos-verb-fg); }
.tcd-term-pos[data-pos="adjective"] { background: var(--tcd-pos-adj-bg);   color: var(--tcd-pos-adj-fg); }
.tcd-term-pos[data-pos="adverb"]    { background: var(--tcd-pos-adv-bg);   color: var(--tcd-pos-adv-fg); }
.tcd-term-pos[data-pos="pronoun"]   { background: var(--tcd-pos-pron-bg);  color: var(--tcd-pos-pron-fg); }


/* Frequency pill (v2.7.0) — small companion to the POS badges that tells
   learners how common a word is. Five tiers, primary-green ramping down
   from saturated to muted. "rare" tier intentionally doesn't render.
   v2.7.1: shrunk to match POS pill dimensions exactly — same font-size,
   padding, italic style — and dropped the uppercase + letter-spacing so
   the pill blends in alongside `adj.` / `n.` instead of dominating. */
.tcd-freq-pill {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: var(--tcd-radius-sm);
    background: var(--tcd-color-primary-soft);
    color: var(--tcd-color-primary);
    font-size: 0.72rem;
    font-weight: 600;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: 2px;
    line-height: 1.4;
}

.tcd-freq-pill--very-common { background: rgba(42, 122, 82, 0.20); color: #1a5536; }
.tcd-freq-pill--common      { background: rgba(42, 122, 82, 0.14); color: #2a7a52; }
.tcd-freq-pill--less-common { background: rgba(212, 137, 42, 0.14); color: #8a5a13; }
.tcd-freq-pill--uncommon    { background: rgba(140, 100, 70, 0.14); color: #6b5037; }


/* v2.13.0 — WordNet lexical-category pill (`food`, `animal`, `motion`,
   `location`, …). Same shape as the POS and frequency pills so the
   three sit comfortably together; muted indigo so it reads as "metadata
   about this concept" without competing with the POS colour-coding or
   the green frequency tier. */
.tcd-cat-pill {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: var(--tcd-radius-sm);
    background: rgba(91, 84, 156, 0.14);
    color: #4b4488;
    font-size: 0.72rem;
    font-weight: 600;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: 2px;
    line-height: 1.4;
}


/* Syllable pill (v2.7.0) — sits next to the phonetic / audio button in
   the expanded view. Compact, low-contrast, just a count hint. */
.tcd-syllable-pill {
    display: inline-block;
    margin-left: var(--tcd-space-2);
    padding: 1px 8px;
    border-radius: var(--tcd-radius-pill);
    background: var(--tcd-color-bg-soft);
    border: 1px solid var(--tcd-color-border);
    color: var(--tcd-color-muted);
    font-size: 0.74rem;
    font-weight: 500;
    vertical-align: middle;
}

/* Meaning cell — Tamil typography. Click-to-copy is a non-obvious feature,
   so we surface it three ways: an always-visible copy glyph at the top-right
   (muted), a subtle cell-background tint on hover, and a brief "check" flash
   on the icon when the click lands. */
.tcd-meaning-cell {
    position: relative;
    padding-right: 34px !important;
    cursor: pointer;
    color: var(--tcd-color-text);
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base);
}

.tcd-meaning-cell:hover {
    color: var(--tcd-color-link);
    background: var(--tcd-color-primary-soft);
}

.tcd-meaning-text {
    font-family: var(--tcd-font-tamil);
    font-size: var(--tcd-fs-tamil-base);
    line-height: var(--tcd-lh-tamil);
    /* Preserve newlines from merged-meaning rows ("1. … \n 2. …") so each
       sense renders on its own line. Behaves identically for single-meaning
       rows since there are no embedded newlines in the source data. */
    white-space: pre-line;
}

/* Empty meaning cell — used when a promoted-from-single row couldn't be
   split. Suppress the copy cursor / hover tint so it doesn't pretend to be
   interactive. */
.tcd-meaning-cell--empty {
    cursor: default;
    background: transparent !important;
    padding-right: var(--tcd-space-3) !important;
}

.tcd-meaning-cell--empty:hover {
    background: transparent !important;
    color: inherit;
}

.tcd-copy-hint {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--tcd-color-muted);
    background: transparent;
    font-size: 0.72rem;
    opacity: 0.4;
    pointer-events: none;
    transition: opacity var(--tcd-transition-base), color var(--tcd-transition-base), background var(--tcd-transition-base), transform var(--tcd-transition-base);
}

#tcd-results-table tbody tr:hover .tcd-copy-hint,
.tcd-favorites-table tbody tr:hover .tcd-copy-hint,
.tcd-meaning-cell:hover .tcd-copy-hint {
    opacity: 1;
    color: var(--tcd-color-primary);
    background: var(--tcd-color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tcd-copy-hint.is-copied {
    opacity: 1 !important;
    color: #fff !important;
    background: var(--tcd-color-primary) !important;
    transform: scale(1.12);
    box-shadow: 0 2px 6px rgba(42, 122, 82, 0.32);
}


/* ── Star + chevron controls (FA icons) ──────────────────────────────────── */

.tcd-fav-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: var(--tcd-space-1);
    border-radius: 50%;
    cursor: pointer;
    color: var(--tcd-color-gold);
    background: var(--tcd-color-gold-soft);
    font-size: 0.95rem;
    line-height: 1;
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base), transform var(--tcd-transition-base);
    vertical-align: middle;
}

/* Chevron — v2.7.2 upgraded from icon-only pill to a labelled "Details ›"
   pill. The label makes the affordance unambiguous; the chevron icon still
   rotates on expand. Sized to match the favourite-star pill height. */
.tcd-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    margin-right: var(--tcd-space-1);
    padding: 0 10px;
    border-radius: var(--tcd-radius-pill);
    background: var(--tcd-color-primary-soft);
    color: var(--tcd-color-primary);
    font-family: var(--tcd-font-ui);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base), transform var(--tcd-transition-base);
}

.tcd-expand-label {
    letter-spacing: 0.02em;
}

.tcd-expand-chevron {
    font-size: 0.68rem;
    transition: transform var(--tcd-transition-base);
}

.tcd-expand-toggle:hover {
    background: var(--tcd-color-primary);
    color: #fff;
    transform: scale(1.04);
}

/* Whole-row hover also lights up the chevron — when the cursor is anywhere
   over a row, the pill brightens to signal "click me". */
#tcd-results-table tbody tr:hover .tcd-expand-toggle:not(.is-on) {
    background: var(--tcd-color-primary);
    color: #fff;
}

.tcd-expand-toggle.is-on {
    color: #fff;
    background: var(--tcd-color-primary);
}

.tcd-expand-toggle.is-on .tcd-expand-chevron {
    transform: rotate(90deg);
}

/* Disabled Details pill (v2.7.3) — for rows with no headword (Tier-4
   reverse-lookups). Greyed out, no hover, click handler doesn't fire. */
.tcd-expand-toggle--disabled,
.tcd-expand-toggle--disabled:hover,
#tcd-results-table tbody tr:hover .tcd-expand-toggle--disabled {
    background: var(--tcd-color-bg-soft);
    color: var(--tcd-color-muted);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    opacity: 0.7;
}

/* Empty Details pill (v2.7.4) — marked after enrichment fetch returns
   empty (e.g. dictionaryapi.dev 404 on a multi-word headword). Stays
   clickable so the user can collapse the empty-state panel, but visually
   matches the disabled state so re-clicking doesn't look like a fresh CTA. */
.tcd-expand-toggle--empty,
.tcd-expand-toggle--empty:hover,
.tcd-expand-toggle--empty.is-on,
#tcd-results-table tbody tr:hover .tcd-expand-toggle--empty {
    background: var(--tcd-color-bg-soft);
    color: var(--tcd-color-muted);
    transform: none;
    opacity: 0.7;
    box-shadow: none;
}

.tcd-expand-toggle--empty .tcd-expand-chevron {
    /* Hide the rotating chevron — there's nothing to "expand into" anymore. */
    display: none;
}

/* Favourite star — v2.7.2 always shows a soft-gold background pill so it
   reads as an actionable control rather than a feeble outline. */
.tcd-fav-star:hover {
    color: #fff;
    background: var(--tcd-color-gold);
    transform: scale(1.08);
}

.tcd-fav-star.is-on {
    color: var(--tcd-color-gold);
}

.tcd-fav-star.is-on:hover {
    background: var(--tcd-color-gold-soft);
}


/* ── Favourites remove button ────────────────────────────────────────────── */

.tcd-fav-actions {
    text-align: right;
    white-space: nowrap;
}

.tcd-fav-remove {
    background: none;
    border: 0;
    padding: 4px 8px;
    color: var(--tcd-color-muted);
    cursor: pointer;
    border-radius: var(--tcd-radius-sm);
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base);
}

.tcd-fav-remove:hover {
    color: var(--tcd-color-danger);
    background: var(--tcd-color-bg-soft);
}


/* ── Favourites multi-language sections ──────────────────────────────────── */

.tcd-favorites-section {
    margin-bottom: var(--tcd-space-6);
}

.tcd-favorites-section:last-child {
    margin-bottom: 0;
}

.tcd-favorites-heading {
    font-size: var(--tcd-fs-lg);
    font-weight: 600;
    margin: 0 0 var(--tcd-space-3);
    color: var(--tcd-color-text);
    border-bottom: 1px solid var(--tcd-color-border);
    padding-bottom: var(--tcd-space-2);
}

.tcd-favorites-heading small {
    color: var(--tcd-color-muted);
    font-weight: 400;
    font-size: var(--tcd-fs-sm);
    margin-left: var(--tcd-space-2);
}


/* ── Toast (copy confirmation) ───────────────────────────────────────────── */

.tcd-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translate(-50%, 8px);
    background: rgba(20, 28, 24, 0.94);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--tcd-radius-pill);
    font-size: var(--tcd-fs-sm);
    font-weight: 500;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tcd-transition-base), transform var(--tcd-transition-base);
    box-shadow: var(--tcd-shadow-lift);
}

.tcd-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* v2.8.7 — voice-flow toast can contain a spinner. The default primary-green
   spinner head reads poorly against the toast's dark surface, so brighten it
   to white and lift the track for contrast. Gives a small inline-flex layout
   so the spinner + label sit on one tidy row. */
.tcd-toast {
    display: inline-flex;
    align-items: center;
    gap: var(--tcd-space-2);
}

.tcd-toast .tcd-spinner {
    width: 16px;
    height: 16px;
}

.tcd-toast .tcd-spinner .tcd-spinner-track { stroke: rgba(255, 255, 255, 0.30); opacity: 1; }
.tcd-toast .tcd-spinner .tcd-spinner-head  { stroke: #ffffff; }


/* ── Expandable enrichment block ─────────────────────────────────────────── */

.tcd-enrich-detail {
    background: var(--tcd-color-bg-soft);
    border-radius: var(--tcd-radius-md);
    padding: var(--tcd-space-4) var(--tcd-space-5);
    margin: var(--tcd-space-2) 0;
    font-size: var(--tcd-fs-sm);
    color: var(--tcd-color-text);
}

.tcd-enrich-detail .tcd-enrich-section {
    margin-bottom: var(--tcd-space-3);
}

.tcd-enrich-detail .tcd-enrich-section:last-child {
    margin-bottom: 0;
}

.tcd-enrich-label {
    display: inline-block;
    font-weight: 600;
    color: var(--tcd-color-muted);
    margin-right: var(--tcd-space-2);
    min-width: 90px;
    text-transform: uppercase;
    font-size: var(--tcd-fs-xs);
    letter-spacing: 0.04em;
}

/* POS badges colour-coded by part of speech (data-pos attribute set in JS).
   Falls back to "other" tinted slate for anything we don't recognise. */
.tcd-enrich-pos-badge {
    display: inline-block;
    background: var(--tcd-pos-other-bg);
    color: var(--tcd-pos-other-fg);
    border-radius: var(--tcd-radius-sm);
    padding: 3px var(--tcd-space-2);
    margin-right: var(--tcd-space-1);
    font-size: var(--tcd-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tcd-enrich-pos-badge[data-pos="noun"]        { background: var(--tcd-pos-noun-bg);  color: var(--tcd-pos-noun-fg); }
.tcd-enrich-pos-badge[data-pos="verb"]        { background: var(--tcd-pos-verb-bg);  color: var(--tcd-pos-verb-fg); }
.tcd-enrich-pos-badge[data-pos="adjective"]   { background: var(--tcd-pos-adj-bg);   color: var(--tcd-pos-adj-fg); }
.tcd-enrich-pos-badge[data-pos="adverb"]      { background: var(--tcd-pos-adv-bg);   color: var(--tcd-pos-adv-fg); }
.tcd-enrich-pos-badge[data-pos="pronoun"]     { background: var(--tcd-pos-pron-bg);  color: var(--tcd-pos-pron-fg); }

/* Base chip (related-by-default = teal) and modifier variants by category. */
.tcd-enrich-chip {
    display: inline-block;
    background: var(--tcd-color-teal-soft);
    border: 1px solid rgba(15, 181, 168, 0.28);
    border-radius: var(--tcd-radius-pill);
    padding: 3px var(--tcd-space-3);
    margin: 0 var(--tcd-space-1) var(--tcd-space-1) 0;
    font-size: var(--tcd-fs-sm);
    font-weight: 500;
    color: #096860;
    text-decoration: none;
    transition: background var(--tcd-transition-base), transform var(--tcd-transition-base), box-shadow var(--tcd-transition-base);
}

.tcd-enrich-chip:hover {
    background: rgba(15, 181, 168, 0.22);
    transform: translateY(-1px);
    box-shadow: var(--tcd-shadow-soft);
    text-decoration: none;
    color: #074d47;
}

/* Synonyms — violet */
.tcd-enrich-chip-syn {
    background: var(--tcd-color-violet-soft);
    border-color: rgba(124, 92, 224, 0.28);
    color: #4a2db5;
}
.tcd-enrich-chip-syn:hover {
    background: rgba(124, 92, 224, 0.22);
    color: #32208a;
}

/* Antonyms — coral */
.tcd-enrich-chip-ant {
    background: var(--tcd-color-coral-soft);
    border-color: rgba(255, 120, 73, 0.32);
    color: #a83e15;
}
.tcd-enrich-chip-ant:hover {
    background: rgba(255, 120, 73, 0.22);
    color: #7a2a08;
}

/* v2.10.6 — chips for words not present in the current dictionary.
   Applied alongside the base / -syn / -ant modifiers; this rule wins
   on hover/cursor via !important to neutralise the colour-specific
   hover rules above. The user sees the word (useful as a thesaurus)
   but can't click it to a dead-end "No results" page. */
.tcd-enrich-chip--unavailable {
    opacity: 0.45;
    cursor: not-allowed !important;
    text-decoration: line-through;
    pointer-events: auto; /* keep tooltip working — click guard is in JS */
}
.tcd-enrich-chip--unavailable:hover {
    /* Suppress the lift/shadow/colour shifts of the base hover rules. */
    background: inherit;
    transform: none !important;
    box-shadow: none !important;
    color: inherit;
}

/* Sense markers (1)(2)(3) — wrapped in span by JS, styled like mini badges */
.tcd-sense-num {
    display: inline-block;
    background: var(--tcd-color-yellow-soft);
    color: #6b4a00;
    border-radius: var(--tcd-radius-sm);
    padding: 0 6px;
    margin: 0 4px 0 0;
    font-size: var(--tcd-fs-xs);
    font-weight: 700;
    font-family: var(--tcd-font-ui);
    vertical-align: 2px;
}

.tcd-enrich-audio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: var(--tcd-space-2);
    background: var(--tcd-color-surface);
    border: 1px solid var(--tcd-color-border);
    border-radius: 50%;
    color: var(--tcd-color-primary);
    cursor: pointer;
    transition: background var(--tcd-transition-base), transform var(--tcd-transition-base);
}

.tcd-enrich-audio-btn:hover {
    background: var(--tcd-color-primary-soft);
    transform: scale(1.06);
}

.tcd-enrich-detail ol {
    margin: var(--tcd-space-1) 0 0 1.2em;
    padding: 0;
}

.tcd-enrich-detail li {
    margin-bottom: var(--tcd-space-1);
}

.tcd-enrich-example {
    color: var(--tcd-color-muted);
    font-style: italic;
    margin-left: var(--tcd-space-2);
}

/* Bilingual example pair from Tatoeba — distinct block with the English
   sentence on one line and the target-language translation below in the
   Tamil/Devanagari/Arabic etc. font. Indented under the "Example:" label. */
.tcd-enrich-examples-pair {
    background: rgba(15, 181, 168, 0.07);
    border-left: 3px solid var(--tcd-color-teal);
    border-radius: var(--tcd-radius-sm);
    padding: var(--tcd-space-2) var(--tcd-space-3);
    margin-top: var(--tcd-space-2);
}

.tcd-enrich-pair {
    margin-top: 2px;
    margin-left: var(--tcd-space-2);
}

/* v2.7.0 — when multiple pairs are stacked in one Example block, add a
   visual divider so they don't merge into a wall of text. */
.tcd-enrich-pair + .tcd-enrich-pair {
    margin-top: var(--tcd-space-2);
    padding-top: var(--tcd-space-2);
    border-top: 1px dashed rgba(15, 181, 168, 0.22);
}

.tcd-enrich-pair-en {
    color: var(--tcd-color-text);
    font-style: italic;
    line-height: 1.5;
}

.tcd-enrich-pair-en::before { content: "“"; color: var(--tcd-color-muted); }
.tcd-enrich-pair-en::after  { content: "”"; color: var(--tcd-color-muted); }

.tcd-enrich-pair-lang {
    margin-top: 4px;
    color: var(--tcd-color-text);
    font-family: var(--tcd-font-tamil);
    font-size: var(--tcd-fs-tamil-base);
    line-height: var(--tcd-lh-tamil);
}

.tcd-enrich-empty {
    color: var(--tcd-color-muted);
    font-style: italic;
}


/* ── Alphabet navigation ─────────────────────────────────────────────────── */

/* Outer container — used by both [tcd_alphabet_nav] (AJAX) and the
   in-place output area. Padding only; the inner flex row handles layout. */
.tcd-alphabet-nav {
    padding: var(--tcd-space-3) 0;
}

/* Letter row — flex with wrap so A–Z reflows cleanly on any width. Used by
   both shortcodes ([tcd_alpha_links] and [tcd_alphabet_nav]). */
.tcd-alpha-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 0;
    margin: 0;
}

/* "list" style — compact, left-aligned, smaller gap. The same .tcd-letter-btn
   children get a slimmer variant via .tcd-letter-btn--inline. */
.tcd-alpha-links--list {
    gap: 4px;
    justify-content: flex-start;
}

/* Letter button — works as both <button> (AJAX nav) and <a> (anchor links).
   Circular pill, soft primary background, lifts on hover. */
.tcd-letter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--tcd-space-2);
    /* Lightest warm parchment in v2.5.4 — tertiary nav weight, distinct from
       the warm-pearl quickbar and the deeper cream search hero. */
    border: 1px solid var(--tcd-color-border-warm);
    border-radius: 50%;
    background: var(--tcd-color-surface-pearl);
    color: var(--tcd-color-primary);
    font-family: var(--tcd-font-ui);
    font-size: var(--tcd-fs-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base), border-color var(--tcd-transition-base), transform var(--tcd-transition-base), box-shadow var(--tcd-transition-base);
}

.tcd-letter-btn:hover {
    background: var(--tcd-color-primary-soft);
    color: var(--tcd-color-primary-hover, var(--tcd-color-primary));
    border-color: var(--tcd-color-primary);
    transform: translateY(-1px);
    text-decoration: none;
}

.tcd-letter-btn:focus-visible {
    outline: none;
    box-shadow: var(--tcd-shadow-focus);
    border-color: var(--tcd-color-primary);
}

.tcd-letter-btn.is-active,
.tcd-letter-btn.active {
    background: var(--tcd-color-primary);
    color: #fff;
    border-color: var(--tcd-color-primary);
    box-shadow: var(--tcd-shadow-soft);
}

/* Inline list variant — smaller, no border, just colored text. Used by
   [tcd_alpha_links style="list"]. */
.tcd-letter-btn--inline {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--tcd-color-link);
    font-weight: 700;
    font-size: var(--tcd-fs-sm);
}

.tcd-letter-btn--inline:hover {
    background: var(--tcd-color-primary-soft);
    color: var(--tcd-color-primary);
    border: 0;
    transform: none;
}


/* ── Browse output area ──────────────────────────────────────────────────── */

.tcd-browse-output {
    margin-top: var(--tcd-space-4);
}

.tcd-browse-heading {
    font-size: var(--tcd-fs-lg);
    margin-bottom: var(--tcd-space-3);
    color: var(--tcd-color-text);
    font-weight: 600;
}


/* ── Word of the Day card ────────────────────────────────────────────────── */

.tcd-wotd-card {
    position: relative;
    background: var(--tcd-color-surface);
    border: 1px solid var(--tcd-color-border);
    border-radius: var(--tcd-radius-lg);
    padding: var(--tcd-space-5) var(--tcd-space-5) var(--tcd-space-5);
    max-width: 520px;
    margin: var(--tcd-space-3) auto;
    box-shadow: var(--tcd-shadow-soft);
    overflow: hidden;
    transition: box-shadow var(--tcd-transition-base), transform var(--tcd-transition-base);
}

/* Gradient top stripe in accent red → coral */
.tcd-wotd-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--tcd-color-accent) 0%, var(--tcd-color-coral) 60%, var(--tcd-color-yellow) 100%);
}

.tcd-wotd-card:hover {
    box-shadow: var(--tcd-shadow-lift);
    transform: translateY(-2px);
}

.tcd-wotd-header {
    display: flex;
    align-items: center;
    gap: var(--tcd-space-2);
    margin: var(--tcd-space-2) 0 var(--tcd-space-3);
    font-size: var(--tcd-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tcd-color-accent);
}

.tcd-wotd-icon {
    font-size: 1.2rem;
}

.tcd-wotd-term {
    font-family: var(--tcd-font-tamil);
    font-size: var(--tcd-fs-xl);
    font-weight: 600;
    color: var(--tcd-color-text);
    margin: 0 0 var(--tcd-space-1);
    line-height: var(--tcd-lh-tamil);
}

.tcd-wotd-meaning {
    font-family: var(--tcd-font-tamil);
    font-size: var(--tcd-fs-md);
    color: var(--tcd-color-text);
    margin: 0 0 var(--tcd-space-2);
    line-height: var(--tcd-lh-tamil);
}

.tcd-wotd-date {
    font-size: var(--tcd-fs-xs);
    color: var(--tcd-color-muted);
    margin: 0;
    letter-spacing: 0.03em;
}


/* ── Loading / error / no-results ────────────────────────────────────────── */

.tcd-loading {
    color: var(--tcd-color-muted);
    font-style: italic;
    padding: var(--tcd-space-3) 0;
}

.tcd-error {
    color: var(--tcd-color-danger);
}

.tcd-no-results {
    color: var(--tcd-color-muted);
    padding: var(--tcd-space-4) 0;
    font-size: var(--tcd-fs-sm);
}


/* ── Loading + error blocks (unified replacement for .tcd-loading text) ── */

@keyframes tcd-spin {
    to { transform: rotate(360deg); }
}

.tcd-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    animation: tcd-spin 720ms linear infinite;
    flex-shrink: 0;
}

.tcd-spinner .tcd-spinner-track {
    stroke: var(--tcd-color-border-strong);
    opacity: 0.35;
}

.tcd-spinner .tcd-spinner-head {
    stroke: var(--tcd-color-primary);
    stroke-dasharray: 14 42;
    stroke-dashoffset: 0;
}

.tcd-loading-rich {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tcd-space-2);
    padding: var(--tcd-space-5) var(--tcd-space-3);
    color: var(--tcd-color-muted);
    font-size: var(--tcd-fs-sm);
}

.tcd-loading-rich .tcd-spinner {
    width: 22px;
    height: 22px;
}

.tcd-error-rich {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tcd-space-2);
    padding: var(--tcd-space-4) var(--tcd-space-3);
    color: var(--tcd-color-danger);
    background: rgba(220, 60, 60, 0.06);
    border: 1px solid rgba(220, 60, 60, 0.18);
    border-radius: var(--tcd-radius-md);
    font-size: var(--tcd-fs-sm);
    font-weight: 500;
}

.tcd-error-rich-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* v2.9.9 — .tcd-search-btn.is-loading spinner state removed. The green
   search button it styled is no longer rendered (Google-style submit).
   Loading state is now driven by #tcd-search-status's tcd-spinner. */

/* Inline spinner inside the status bar (when type=info + withSpinner). */
#tcd-search-status .tcd-spinner {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}


/* ── DataTables pagination — modern pill cluster ─────────────────────────── */

.dataTables_wrapper .dataTables_paginate {
    margin-top: var(--tcd-space-3) !important;
    padding: var(--tcd-space-2) 0 !important;
    text-align: center !important;
    float: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 12px !important;
    margin: 0 3px !important;
    border: 1px solid transparent !important;
    border-radius: var(--tcd-radius-sm) !important;
    background: transparent !important;
    color: var(--tcd-color-text) !important;
    font-size: var(--tcd-fs-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base), border-color var(--tcd-transition-base), transform var(--tcd-transition-base);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--tcd-color-primary-soft) !important;
    color: var(--tcd-color-primary) !important;
    border-color: var(--tcd-color-primary-soft) !important;
    transform: translateY(-1px);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--tcd-color-primary) !important;
    color: #fff !important;
    border-color: var(--tcd-color-primary) !important;
    box-shadow: var(--tcd-shadow-soft);
    transform: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.35 !important;
    background: transparent !important;
    color: var(--tcd-color-muted) !important;
    border-color: transparent !important;
    cursor: not-allowed;
    transform: none;
}

/* Previous/Next become icon-only squares; rest get pill width. */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    width: 34px;
    padding: 0 !important;
    color: var(--tcd-color-muted) !important;
    font-size: 0.9rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
    color: var(--tcd-color-primary) !important;
}

/* Ellipsis ("…") between page-number blocks for large result sets. */
.dataTables_wrapper .dataTables_paginate .ellipsis {
    color: var(--tcd-color-muted);
    padding: 0 4px;
}


/* ── Animations ──────────────────────────────────────────────────────────── */

@keyframes tcd-row-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tcd-star-pop {
    0%   { transform: scale(1);   }
    40%  { transform: scale(1.4); }
    70%  { transform: scale(0.92); }
    100% { transform: scale(1);   }
}

.tcd-fav-star.is-on {
    animation: tcd-star-pop 360ms ease-out;
}

@keyframes tcd-highlight-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0.55); }
    100% { box-shadow: 0 0 0 6px rgba(255, 200, 61, 0);  }
}

#tcd-results-table tbody tr:nth-child(1) .tcd-highlight {
    animation: tcd-highlight-pulse 900ms ease-out 200ms 1;
}

/* ── Empty / no-results state with illustration ──────────────────────────── */

.tcd-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--tcd-space-6) var(--tcd-space-4);
    text-align: center;
    color: var(--tcd-color-muted);
}

.tcd-empty-state svg {
    width: 96px;
    height: 96px;
    margin-bottom: var(--tcd-space-3);
    opacity: 0.85;
}

/* Compact variant for tight surfaces (favourites empty, WotD error, browse
   no-results) where the full 96px illustration would be visually heavy. */
.tcd-empty-state--compact {
    padding: var(--tcd-space-4) var(--tcd-space-3);
}

.tcd-empty-state--compact svg {
    width: 56px;
    height: 56px;
    margin-bottom: var(--tcd-space-2);
}

.tcd-empty-state-title {
    font-size: var(--tcd-fs-md);
    color: var(--tcd-color-text);
    font-weight: 600;
    margin: 0 0 var(--tcd-space-1);
}

.tcd-empty-state-hint {
    font-size: var(--tcd-fs-sm);
    color: var(--tcd-color-muted);
    margin: 0 0 var(--tcd-space-3);
}

#tcd-results-table tbody tr {
    animation: tcd-row-in 220ms ease-out both;
}

#tcd-results-table tbody tr:nth-child(2)  { animation-delay: 30ms;  }
#tcd-results-table tbody tr:nth-child(3)  { animation-delay: 60ms;  }
#tcd-results-table tbody tr:nth-child(4)  { animation-delay: 90ms;  }
#tcd-results-table tbody tr:nth-child(5)  { animation-delay: 120ms; }
#tcd-results-table tbody tr:nth-child(6)  { animation-delay: 150ms; }
#tcd-results-table tbody tr:nth-child(7)  { animation-delay: 180ms; }
#tcd-results-table tbody tr:nth-child(8)  { animation-delay: 210ms; }
#tcd-results-table tbody tr:nth-child(9)  { animation-delay: 240ms; }
#tcd-results-table tbody tr:nth-child(10) { animation-delay: 270ms; }


/* ══════════════════════════════════════════════════════════════════════════
   v2.8.0 — Discoverability pass + search-box modernisation
   ══════════════════════════════════════════════════════════════════════════ */

/* Controls thead cell stays empty — a narrow gutter, not a labelled column. */
#tcd-results-table thead th.tcd-col-controls {
    width: 1%;
    padding: 0;
    background: transparent;
    border-bottom: 0;
}

/* Row number — colored circular badge prepended to the controls column.
   Sequential 1..N across pagination. Uses primary-green soft pill so the
   badge anchors the row visually without competing with the Details pill. */
.tcd-row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tcd-color-primary) 0%, var(--tcd-color-primary-grad) 100%);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 1px 3px rgba(42, 122, 82, 0.30);
    vertical-align: middle;
    flex: 0 0 auto;
}

/* Dedicated controls column — narrow vertical strip holding the row-num
   badge + Details pill + favourite star. Keeps the term cell free of
   gutter noise so the headword text can breathe. */
.tcd-controls-cell {
    width: 1%;                      /* shrink-to-fit; DataTables won't grow it */
    white-space: nowrap;
    padding: var(--tcd-space-2) var(--tcd-space-3) var(--tcd-space-2) var(--tcd-space-2) !important;
    vertical-align: middle;
    text-align: center;
}

.tcd-controls-cell > .tcd-row-num {
    margin-bottom: 6px;
}

/* Inside the controls column we stack the Details pill + star vertically so
   the column stays narrow (~100 px) regardless of label length. Overrides
   the legacy 120 px min-width reservation that the gutter pattern relied on. */
.tcd-controls-cell .tcd-term-controls {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* In the dedicated controls column the Details pill no longer needs its
   right-margin (it was there to separate it from the inline term text). */
.tcd-controls-cell .tcd-expand-toggle,
.tcd-controls-cell .tcd-fav-star {
    margin-right: 0;
}

/* The term body no longer needs to reserve room for the controls gutter —
   they live in a separate <td> now. Reset the legacy max-width. */
.tcd-controls-cell + .tcd-term-cell .tcd-term-body {
    max-width: 100%;
}

/* "Page A of B" muted label next to the pagination cluster. Hidden when there's
   only one page (JS removes the element). */
.tcd-paginate-info {
    display: inline-block;
    margin-right: var(--tcd-space-3);
    color: var(--tcd-color-muted);
    font-size: var(--tcd-fs-sm);
    font-weight: 500;
    vertical-align: middle;
}

/* v2.8.4 — pagination bar container. Wraps the "Page A of B" label, the
   pagination cluster, and (on the bottom bar) the length menu + info into one
   soft-surface card matching the results-info toolbar. Top + bottom variants
   share the same look. */
.tcd-paginate-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--tcd-space-2) var(--tcd-space-3);
    margin: var(--tcd-space-3) 0;
    padding: var(--tcd-space-2) var(--tcd-space-3);
    background: var(--tcd-color-surface);
    border: 1px solid var(--tcd-color-border);
    border-radius: var(--tcd-radius-md);
    box-shadow: var(--tcd-shadow-soft);
}

.tcd-paginate-bar--top    { margin-top: 0; }
.tcd-paginate-bar--bottom { margin-bottom: var(--tcd-space-5); }
.tcd-paginate-bar--hidden { display: none; }

/* Reset the DataTables-default paginate wrapper so it sits inline inside
   the new bar without its own margin/padding fighting our layout. */
.tcd-paginate-bar .dataTables_paginate {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

/* DataTables emits an .dataTables_info element ("Showing X to Y of Z") inside
   the bottom bar; we already render an equivalent range string in the
   results-info toolbar, so suppress this duplicate. */
.tcd-paginate-bar .dataTables_info {
    display: none;
}

/* Bumped active-page button — 40×40 with shadow-lift + bolder type so the
   user instantly sees where they are in the result set. */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: var(--tcd-fs-base);
    font-weight: 700;
    box-shadow: var(--tcd-shadow-lift) !important;
}

/* Alphabet-nav wrapper — warm-pearl tray with a small uppercase label, parallel
   to the quickbar's "Recent" head. Sits above the .tcd-alphabet-nav body.
   Centered within its parent so it aligns with the search hero / quickbar. */
.tcd-alpha-wrapper {
    max-width: 720px;
    margin: var(--tcd-space-3) auto;
    padding: var(--tcd-space-2) var(--tcd-space-3) var(--tcd-space-3);
    background: var(--tcd-color-surface-warm);
    border: 1px solid var(--tcd-color-border-warm);
    border-radius: var(--tcd-radius-lg);
    box-shadow: var(--tcd-shadow-soft);
    text-align: center;
}

.tcd-alpha-wrapper-head {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin-bottom: var(--tcd-space-2);
}

.tcd-alpha-wrapper-label {
    font-size: var(--tcd-fs-sm);
    font-weight: 600;
    color: var(--tcd-color-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tcd-alpha-wrapper .tcd-alphabet-nav {
    padding: 0;
}

/* "Recent" head row — label + Clear all link side-by-side. */
.tcd-recent-head {
    display: inline-flex;
    align-items: baseline;
    gap: var(--tcd-space-2);
}

.tcd-recent-clear-all {
    font-size: var(--tcd-fs-xs);
    font-weight: 500;
    color: var(--tcd-color-muted);
    text-decoration: underline;
    text-decoration-color: rgba(107, 116, 128, 0.3);
    text-underline-offset: 2px;
    transition: color var(--tcd-transition-base);
}

.tcd-recent-clear-all:hover {
    color: var(--tcd-color-danger);
    text-decoration-color: currentColor;
}

/* × Clear button inside the search input. Appears only when the input has
   text. Tucked between the input and the keyboard hint / voice / search btn. */
.tcd-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: var(--tcd-space-1);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(107, 116, 128, 0.12);
    color: var(--tcd-color-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base), transform var(--tcd-transition-base);
}

.tcd-search-clear:hover {
    background: rgba(179, 38, 30, 0.16);
    color: var(--tcd-color-danger);
    transform: scale(1.05);
}

/* v2.9.11 — .tcd-kbd-hint rules removed alongside the element itself.
   The "/" keyboard shortcut still works (JS at tcd-frontend.js:1154);
   we just no longer surface the hint inside the pill. */

/* Voice-input cluster — groups the mic and EN|TA segmented toggle so they
   read as one unit. v2.8.6 replaces the v2.8.2 single-pill toggle (which
   only showed the active mode and was non-obvious as a toggle).
   v2.9.10: removed the subtle green-tinted background that was creating a
   second visual block on the right of the pill — the cluster now sits on
   the pill's own surface, removing the two-tone "input here, voice over
   there" effect. The mic button's circle and the toggle's segmented
   border still give the cluster enough structure on their own. */
.tcd-voice-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: var(--tcd-space-1);
    padding: 0;
    background: transparent;
}

.tcd-voice-group .tcd-voice-btn {
    margin-right: 0;
}

/* Segmented EN | TARGET toggle. Both options always visible; .is-active
   marks the chosen one. Click any segment to set that mode. */
.tcd-voice-lang-toggle {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border: 1px solid var(--tcd-color-border);
    border-radius: var(--tcd-radius-pill);
    background: rgba(255, 255, 255, 0.55);
}

.tcd-voice-lang-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--tcd-radius-pill);
    background: transparent;
    color: var(--tcd-color-muted);
    font-family: var(--tcd-font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base);
}

.tcd-voice-lang-opt:hover:not(.is-active) {
    color: var(--tcd-color-primary);
}

.tcd-voice-lang-opt.is-active {
    background: var(--tcd-color-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(42, 122, 82, 0.25);
}

/* 🎤 Voice-search button. Sits between the keyboard hint and the search btn. */
.tcd-voice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: var(--tcd-space-1);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(42, 122, 82, 0.10);
    color: var(--tcd-color-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--tcd-transition-base), color var(--tcd-transition-base), transform var(--tcd-transition-base), box-shadow var(--tcd-transition-base);
}

.tcd-voice-btn:hover {
    background: var(--tcd-color-primary);
    color: #fff;
    transform: scale(1.05);
}

@keyframes tcd-voice-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(255, 120, 73, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(255, 120, 73, 0);    }
}

.tcd-voice-btn.is-listening {
    background: var(--tcd-color-coral);
    color: #fff;
    animation: tcd-voice-pulse 1.1s ease-out infinite;
}

/* Floating back-to-top button — bottom-right corner, fades in past the
   scroll threshold. */
.tcd-back-to-top {
    position: fixed;
    right: var(--tcd-space-4);
    bottom: var(--tcd-space-5);
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--tcd-color-border-warm);
    border-radius: 50%;
    background: var(--tcd-color-surface);
    color: var(--tcd-color-primary);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    box-shadow: var(--tcd-shadow-lift);
    transition: opacity 200ms ease, transform 200ms ease, background var(--tcd-transition-base), color var(--tcd-transition-base);
}

.tcd-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tcd-back-to-top:hover {
    background: var(--tcd-color-primary);
    color: #fff;
}

/* Richer autocomplete rows — POS abbrev pills + frequency tag, mirroring the
   table-cell badge treatment so the dropdown reads as a learner-dictionary
   picker rather than a plain word list. */
.tcd-ac-row {
    display: inline-flex;
    align-items: center;
    gap: var(--tcd-space-2);
    width: 100%;
}

.tcd-ac-word {
    font-weight: 600;
    color: inherit;
}

.tcd-ac-pos {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--tcd-radius-sm);
    background: var(--tcd-color-primary-soft);
    color: var(--tcd-color-primary);
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.tcd-ac-freq {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--tcd-color-muted);
    font-weight: 500;
}

.tcd-ac-freq--very-common { color: var(--tcd-color-primary); }
.tcd-ac-freq--common      { color: var(--tcd-color-teal); }
.tcd-ac-freq--less-common,
.tcd-ac-freq--uncommon    { color: var(--tcd-color-muted); }

/* Inside a hovered/active row, jQuery UI flips text to white — keep our
   inline pills + freq tag readable against the primary-green active bg. */
.ui-menu-item-wrapper:hover .tcd-ac-pos,
.ui-menu-item-wrapper.ui-state-active .tcd-ac-pos {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.ui-menu-item-wrapper:hover .tcd-ac-freq,
.ui-menu-item-wrapper.ui-state-active .tcd-ac-freq {
    color: rgba(255, 255, 255, 0.85);
}


/* ── Mobile (≤ 640 px) — table collapses to stacked cards ────────────────── */

@media (max-width: 640px) {
    .tcd-search-wrapper,
    .tcd-favorites-wrapper {
        max-width: 100%;
        padding: var(--tcd-space-2) var(--tcd-space-3);
    }

    /* v2.9.9 — .tcd-search-btn{,-label} mobile rules removed alongside the
       desktop rules (template no longer renders the green submit button). */

    .tcd-quickbar {
        padding: var(--tcd-space-2);
    }

    /* Modal goes near-full-screen on narrow viewports so help text stays
       comfortably readable without horizontal scroll. */
    .tcd-help-modal {
        padding: var(--tcd-space-2);
    }

    .tcd-help-panel {
        margin-top: 4vh;
        max-height: calc(100vh - var(--tcd-space-4));
    }

    .tcd-help-list {
        padding: var(--tcd-space-2) var(--tcd-space-3);
    }

    /* On narrow screens, stack the head row so the favourites link drops below
       the Recent label instead of competing for horizontal space. */
    .tcd-quickbar-head {
        flex-wrap: wrap;
        row-gap: var(--tcd-space-2);
    }

    /* Table → stacked cards */
    #tcd-results-table thead,
    .tcd-favorites-table thead {
        display: none;
    }

    #tcd-results-table,
    .tcd-favorites-table {
        border: 0;
        background: transparent;
    }

    #tcd-results-table tbody tr,
    .tcd-favorites-table tbody tr {
        display: block;
        background: var(--tcd-color-surface);
        border: 1px solid var(--tcd-color-border);
        border-radius: var(--tcd-radius-md);
        margin-bottom: var(--tcd-space-3);
        padding: var(--tcd-space-3) var(--tcd-space-4);
        box-shadow: var(--tcd-shadow-soft);
    }

    #tcd-results-table tbody td,
    .tcd-favorites-table tbody td {
        display: block;
        padding: var(--tcd-space-1) 0;
        border: 0;
    }

    #tcd-results-table tbody tr td:first-child {
        box-shadow: none;
    }

    /* Pull the chevron + star above the term on mobile */
    .tcd-term-cell {
        white-space: normal;
    }

    /* v2.8.1 mobile: controls cell flattens to a small horizontal header
       across the top of each card (row-num pill on the left, Details + star
       in a row on the right). Drops the desktop vertical-stack treatment. */
    .tcd-controls-cell {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: var(--tcd-space-2);
        width: auto !important;
        text-align: left !important;
        padding: 0 0 var(--tcd-space-2) !important;
        border-bottom: 1px solid var(--tcd-color-border) !important;
        margin-bottom: var(--tcd-space-2);
    }

    .tcd-controls-cell > .tcd-row-num {
        margin-bottom: 0;
    }

    .tcd-controls-cell .tcd-term-controls {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    /* Hide the empty controls-thead cell on mobile (thead is already hidden
       overall, but the rule above for tcd-col-controls keeps display intact). */
    #tcd-results-table thead th.tcd-col-controls {
        display: none;
    }

    .tcd-term-body {
        display: block;
        max-width: 100%;
        padding-left: 0;
    }

    .tcd-term-body .tcd-term-text {
        padding-left: 0;
    }

    .tcd-meaning-text {
        font-size: 1.1rem;        /* slightly larger Tamil on small screens */
    }

    /* Stack the results toolbar on narrow screens — count on top, length
       selector below — so the row doesn't squeeze the "Per page" label. */
    .tcd-search-info {
        justify-content: flex-start;
        padding: var(--tcd-space-2);
    }

    /* Bigger tap targets in pagination */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 12px !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
    .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        width: 38px !important;
    }

    /* v2.8.0 — keep the active-page bump but cap it to mobile-friendly size. */
    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        min-width: 42px !important;
        height: 42px !important;
    }

    /* "Page A of B" label stacks above the buttons on narrow screens. */
    .tcd-paginate-info {
        display: block;
        margin: 0 0 var(--tcd-space-1);
        text-align: center;
    }

    /* Tuck the back-to-top button against the right edge so it doesn't
       eat the mobile content gutter. */
    .tcd-back-to-top {
        right: var(--tcd-space-3);
        bottom: var(--tcd-space-4);
        width: 40px;
        height: 40px;
    }

    /* v2.9.11 — .tcd-kbd-hint mobile rule removed alongside the element
       itself (no longer in the template). */

    /* Search hero button cluster gets cramped on small screens; shrink the
       voice + clear buttons a touch. */
    .tcd-voice-btn { width: 32px; height: 32px; }
    .tcd-search-clear { width: 26px; height: 26px; }
    .tcd-voice-lang-opt { height: 20px; min-width: 26px; padding: 0 6px; font-size: 0.66rem; }
    .tcd-voice-group { padding: 1px 3px 1px 1px; }
}


/* ── Dark mode (auto) ────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    :root {
        --tcd-color-text:           #e6ebe7;
        --tcd-color-muted:          #9aa3a0;
        --tcd-color-surface:        #1c2622;
        --tcd-color-surface-warm:   #2a2618;        /* warm-tinted surface — dark equivalent of #faf4e4 */
        --tcd-color-surface-pearl:  #232014;        /* lighter warm surface for alphabet pills */
        --tcd-color-border-warm:    rgba(180, 138, 75, 0.28);
        --tcd-color-bg-soft:        #243029;
        --tcd-color-bg-grain:       #1a2520;
        --tcd-color-border:         #2f3d35;
        --tcd-color-border-strong:  #3a4a40;

        /* Dark-mode cell tints: subtle warm-brown vs cool-green zebra */
        --tcd-cell-warm:            #2a2820;
        --tcd-cell-cool:            #1f2c25;
        --tcd-cell-hover:           #2f3d2f;
        --tcd-cell-header:          #243a2c;
        --tcd-search-bg-start:      #3a2e1c;
        --tcd-search-bg-mid:        #2e2a1c;
        --tcd-search-bg-end:        #1f3a2c;
        --tcd-color-highlight-bg:     #5a4a0e;
        --tcd-color-highlight-text:   #ffe89a;
        --tcd-color-highlight-stroke: rgba(255, 220, 130, 0.32);
        --tcd-color-link:           #6db58c;
        --tcd-color-link-hover:     #88c9a4;
        --tcd-color-primary-soft:   rgba(109, 181, 140, 0.14);
        --tcd-color-gold-soft:      rgba(255, 138, 61, 0.20);
        --tcd-color-coral-soft:     rgba(255, 120, 73, 0.20);
        --tcd-color-teal-soft:      rgba(15, 181, 168, 0.22);
        --tcd-color-violet-soft:    rgba(124, 92, 224, 0.24);
        --tcd-color-yellow-soft:    rgba(255, 200, 61, 0.20);
        --tcd-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35);
        --tcd-shadow-lift: 0 6px 22px rgba(0, 0, 0, 0.45);
        --tcd-shadow-focus: 0 0 0 4px rgba(109, 181, 140, 0.22);

        /* POS badges in dark mode — invert to bright text on muted background */
        --tcd-pos-noun-bg:   rgba(96, 165, 250, 0.18);  --tcd-pos-noun-fg:   #93c5fd;
        --tcd-pos-verb-bg:   rgba(74, 222, 128, 0.18);  --tcd-pos-verb-fg:   #86efac;
        --tcd-pos-adj-bg:    rgba(168, 139, 250, 0.18); --tcd-pos-adj-fg:    #c4b5fd;
        --tcd-pos-adv-bg:    rgba(251, 146, 60, 0.18);  --tcd-pos-adv-fg:    #fdba74;
        --tcd-pos-pron-bg:   rgba(45, 212, 191, 0.18);  --tcd-pos-pron-fg:   #5eead4;
        --tcd-pos-other-bg:  rgba(148, 163, 184, 0.18); --tcd-pos-other-fg:  #cbd5e1;
    }

    /* v2.7.3: Details pill default state. The light-mode pill uses
       --tcd-color-primary text (#2a7a52) on a 14%-alpha primary-soft bg —
       in dark mode that's near-invisible against the dark page. Override
       with brighter green text + stronger bg so the label reads as a clear
       CTA in dark mode too. */
    .tcd-expand-toggle {
        background: rgba(109, 181, 140, 0.22);
        color: #86efac;
    }
    .tcd-expand-toggle:hover,
    #tcd-results-table tbody tr:hover .tcd-expand-toggle:not(.is-on):not(.tcd-expand-toggle--disabled) {
        background: #2a7a52;
        color: #fff;
    }
    .tcd-expand-toggle.is-on {
        background: #2a7a52;
        color: #fff;
    }
    .tcd-expand-toggle--disabled,
    .tcd-expand-toggle--disabled:hover,
    .tcd-expand-toggle--empty,
    .tcd-expand-toggle--empty:hover,
    .tcd-expand-toggle--empty.is-on {
        background: rgba(255, 255, 255, 0.04);
        color: var(--tcd-color-muted);
    }

    /* v2.7.3: Star pill — bump alpha so the gold-soft bg is visible against
       the dark surface, brighter star colour for readability. */
    .tcd-fav-star {
        background: rgba(255, 138, 61, 0.22);
        color: #ffb38f;
    }
    .tcd-fav-star:hover {
        background: #ff8a3d;
        color: #fff;
    }
    .tcd-fav-star.is-on {
        background: #ff8a3d;
        color: #fff;
    }

    /* Brighten chip text against dark backgrounds */
    .tcd-recent-chip          { color: #4dd0c7; border-color: rgba(15, 181, 168, 0.45); }
    .tcd-recent-chip:hover    { color: #7be3dc; }
    .tcd-suggestion-link      { color: #ffa17e; border-color: rgba(255, 120, 73, 0.45); }
    .tcd-suggestion-link:hover{ color: #ffc1a5; }
    .tcd-favorites-link       { color: #ffb38f; border-color: rgba(255, 138, 61, 0.45); }
    .tcd-favorites-link:hover { color: #ffd0b3; }
    .tcd-enrich-chip          { color: #4dd0c7; }
    .tcd-enrich-chip:hover    { color: #7be3dc; }
    /* v2.7.2: explicit background in dark mode so the violet chip doesn't
       render as a pale almost-white pill against the dark surface. */
    .tcd-enrich-chip-syn      { background: rgba(124, 92, 224, 0.18); color: #b5a3f4; border-color: rgba(124, 92, 224, 0.45); }
    .tcd-enrich-chip-syn:hover{ background: rgba(124, 92, 224, 0.28); color: #d2c5fc; }
    .tcd-enrich-chip-ant      { background: rgba(255, 120, 73, 0.18); }
    .tcd-enrich-chip-ant:hover{ background: rgba(255, 120, 73, 0.28); }

    /* Audio button — softer surface in dark mode so the bright white circle
       doesn't pop too hard against the dark detail panel. */
    .tcd-enrich-audio-btn {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--tcd-color-border-strong);
    }
    .tcd-enrich-audio-btn:hover {
        background: rgba(42, 122, 82, 0.22);
    }
    .tcd-enrich-chip-ant      { color: #ffa17e; border-color: rgba(255, 120, 73, 0.45); }
    .tcd-enrich-chip-ant:hover{ color: #ffc1a5; }
    .tcd-sense-num            { color: #ffe89a; background: rgba(255, 200, 61, 0.18); }

    /* v2.9.9 — .tcd-search-btn dark-mode overrides removed alongside the
       button itself. */

    #tcd-results-table thead th,
    .tcd-browse-table thead th,
    .tcd-favorites-table thead th {
        color: #86efac;
    }

    .tcd-letter-btn.is-active,
    .tcd-letter-btn.active,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #2a6a4f !important;
        border-color: #2a6a4f !important;
    }

    /* Re-tint the length-menu chevron for dark mode (SVG stroke is hardcoded). */
    .tcd-search-info .dataTables_length select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239aa3a0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,2 6,6 10,2'/></svg>");
    }

    /* v2.11.0 — fallback notice in dark mode: warm-amber tint translated
       to a dim equivalent that reads clearly against the dark surface. */
    .tcd-search-fallback-notice {
        background: rgba(217, 154, 46, 0.10);
        border-color: rgba(217, 154, 46, 0.32);
        border-left-color: #d99a2e;
        color: #e9c98a;
    }
    .tcd-search-fallback-notice strong {
        color: #fbe2a8;
    }

    /* v2.11.3 — related-phrases row in dark mode: slightly dimmer than
       the fallback notice above it (continuation, not new emphasis). */
    .tcd-related-phrases {
        background: rgba(217, 154, 46, 0.06);
        border-color: rgba(217, 154, 46, 0.32);
        border-left-color: #d99a2e;
        color: #d9c08a;
    }
    .tcd-related-phrases-label {
        color: #fbe2a8;
    }

    /* v2.13.0 — inline category pill in dark mode: dimmer indigo on the
       dark surface, distinct from the green frequency pill. */
    .tcd-cat-pill {
        background: rgba(155, 145, 220, 0.18);
        color: #c8c0f0;
    }

    .tcd-search-wrapper::before,
    .tcd-favorites-wrapper::before {
        background-image:
            radial-gradient(rgba(109, 181, 140, 0.05) 1px, transparent 1px),
            radial-gradient(rgba(255, 138, 61, 0.04) 1px, transparent 1px);
    }

    /* v2.8.0 dark-mode overrides for the new search-box chrome. */
    .tcd-search-clear {
        background: rgba(255, 255, 255, 0.06);
        color: var(--tcd-color-muted);
    }
    .tcd-search-clear:hover {
        background: rgba(255, 161, 126, 0.22);
        color: #ffa17e;
    }

    .tcd-voice-btn {
        background: rgba(109, 181, 140, 0.20);
        color: #86efac;
    }
    .tcd-voice-btn:hover {
        background: #2a7a52;
        color: #fff;
    }

    .tcd-voice-group {
        background: rgba(109, 181, 140, 0.10);
    }
    .tcd-voice-lang-toggle {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--tcd-color-border-strong);
    }
    .tcd-voice-lang-opt {
        color: var(--tcd-color-muted);
    }
    .tcd-voice-lang-opt:hover:not(.is-active) {
        color: #86efac;
    }
    .tcd-voice-lang-opt.is-active {
        background: #2a7a52;
        color: #fff;
    }

    /* v2.9.11 — .tcd-kbd-hint dark-mode rule removed alongside the
       element itself (no longer in the template). */

    .tcd-back-to-top {
        background: var(--tcd-color-surface);
        color: #86efac;
        border-color: rgba(180, 138, 75, 0.32);
    }
    .tcd-back-to-top:hover {
        background: #2a7a52;
        color: #fff;
    }

    .tcd-ac-pos {
        background: rgba(109, 181, 140, 0.20);
        color: #86efac;
    }
    .tcd-ac-freq--very-common { color: #86efac; }
    .tcd-ac-freq--common      { color: #5eead4; }

    .tcd-recent-clear-all {
        color: var(--tcd-color-muted);
    }
    .tcd-recent-clear-all:hover {
        color: #ffa17e;
    }

    .tcd-row-num {
        background: linear-gradient(135deg, #2a7a52 0%, #38a16a 100%);
        color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    }

    /* Hero needs a slightly brighter inset highlight in dark mode so the
       glassy effect reads against the deep warm-brown / mint gradient. */
    .tcd-search-hero {
        border-color: rgba(180, 138, 75, 0.45);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            inset 0 -1px 0 rgba(0, 0, 0, 0.20),
            0 8px 26px rgba(0, 0, 0, 0.40),
            0 0 0 5px rgba(180, 138, 75, 0.06);
    }
}