/* Meaning Search (C12) — mode switch, result cards, chips, highlights.
 * Uses the :root tokens from main.css so light/dark themes come for free. */

.meaning-modes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.meaning-start {
    margin: 0 0 0.25rem;
    color: var(--color-text-secondary, #525252);
    font-size: var(--fs-4, 0.875rem);
    line-height: var(--lh-normal, 1.5);
}

.meaning-no-script {
    margin: 0;
    padding: 0.75rem;
    color: var(--color-text-secondary, #525252);
    font-size: var(--fs-4, 0.875rem);
    line-height: var(--lh-normal, 1.5);
    background: var(--color-bg-alt, #f5f4f1);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--border-radius, 8px);
}

.meaning-mode-btn {
    flex: 1 1 auto;
    min-height: 2.75rem;
    padding: 0.4rem 0.6rem;
    font-size: var(--fs-5, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--border-radius, 8px);
    background: var(--bg-surface, #fff);
    color: var(--color-text-secondary, #525252);
    cursor: pointer;
}

.meaning-mode-btn:hover {
    border-color: var(--color-border-strong, #9ca3af);
    color: var(--color-text, #1a1a1a);
}

.meaning-mode-btn:disabled,
.meaning-mode-btn[aria-disabled="true"] {
    color: var(--color-text-muted, #636363);
    background: var(--color-bg-alt, #f5f4f1);
    border-color: var(--color-border, #d1d5db);
    cursor: not-allowed;
    opacity: 0.72;
}

.meaning-mode-btn--active,
.meaning-mode-btn[aria-pressed="true"] {
    background: var(--color-primary, #1e293b);
    border-color: var(--color-primary, #1e293b);
    color: #fff;
}

.meaning-mode-btn:focus-visible {
    outline: 2px solid var(--color-link, #456b8a);
    outline-offset: 2px;
}

.meaning-form .search-field-label {
    margin-top: 0.75rem;
}

.meaning-availability {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    color: var(--color-text-secondary, #525252);
    background: var(--color-bg-alt, #f5f4f1);
    border: 1px solid var(--color-border, #d1d5db);
    border-left: 0.25rem solid var(--color-accent, #8b5e3c);
    border-radius: var(--border-radius, 8px);
    line-height: var(--lh-normal, 1.5);
}

.meaning-availability strong {
    color: var(--color-text, #1a1a1a);
}

.meaning-form .search-field-label span {
    color: var(--color-text-muted, #636363);
    font-weight: 400;
}

.meaning-form__intro {
    margin: 0;
    color: var(--color-text-secondary, #525252);
    font-size: var(--fs-4, 0.875rem);
    line-height: var(--lh-normal, 1.5);
}

.meaning-textarea {
    resize: vertical;
    min-height: 2.75rem;
    font-family: inherit;
}

.meaning-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.meaning-options {
    margin-top: 0.75rem;
    overflow: clip;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--border-radius, 8px);
    background: var(--color-bg-alt, #f5f4f1);
}

.meaning-options > summary {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    color: var(--color-text-secondary, #525252);
    cursor: pointer;
    font-size: var(--fs-4, 0.875rem);
    font-weight: 650;
}

.meaning-options > summary:hover,
.meaning-options > summary:focus-visible {
    color: var(--color-text, #1a1a1a);
    background: var(--bg-surface, #fff);
}

.meaning-options__body {
    padding: 0 0.75rem 0.75rem;
    border-top: 1px solid var(--color-border, #d1d5db);
}

.meaning-options .checkbox {
    justify-content: flex-start;
}

.meaning-submit {
    margin-top: 0.875rem;
    width: 100%;
}

.meaning-results {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.meaning-result {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--border-radius, 8px);
    background: var(--bg-surface, #fff);
}

.meaning-result__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.meaning-result__head .word-entry__text {
    font-family: var(--font-heading, serif);
    font-size: 1.35rem;
    font-weight: 650;
}

.meaning-result__gloss {
    margin: 0.375rem 0 0;
    font-size: var(--fs-4, 0.875rem);
    color: var(--color-text-secondary, #525252);
    line-height: var(--lh-normal, 1.5);
}

.meaning-result__pos {
    font-style: italic;
    color: var(--color-text-muted, #636363);
    margin-right: 0.25rem;
}

.meaning-mark {
    background: color-mix(in srgb, var(--color-accent, #9b5434) 22%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

.meaning-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.meaning-match-reasons {
    margin-top: 0.625rem;
}

.meaning-match-reasons > p {
    margin: 0;
    color: var(--color-text-muted, #636363);
    font-size: var(--fs-5, 0.75rem);
    font-weight: 650;
}

.meaning-match-reasons .meaning-chips {
    margin-top: 0.25rem;
}

.meaning-chip {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: var(--fs-5, 0.75rem);
    border-radius: 999px;
    border: 1px solid var(--color-border, #d1d5db);
    color: var(--color-text-secondary, #525252);
    background: var(--color-bg-alt, #f5f4f1);
}

.meaning-chip--meaning {
    border-color: color-mix(in srgb, var(--color-accent, #9b5434) 45%, transparent);
}

.meaning-chip--rhyme,
.meaning-chip--sound {
    border-color: color-mix(in srgb, var(--color-link, #456b8a) 55%, transparent);
}

.meaning-notes {
    margin: 0 0 0.75rem;
}

.meaning-note {
    margin: 0.25rem 0;
    font-size: var(--fs-4, 0.875rem);
    color: var(--color-text-muted, #636363);
}

.meaning-empty .no-results {
    margin-bottom: 0.625rem;
}

.meaning-relaxations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .meaning-field-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .tool-layout--meaning .rail-header {
        position: relative;
        width: 100%;
        padding-inline: 2rem;
    }

    .tool-layout--meaning .search-drawer-close {
        position: absolute;
        top: -0.5rem;
        right: -0.5rem;
        margin: 0;
    }
}