/* ============================================================
   Strong's Concordance Tab Styles — strongs_tab.css
   Mirrors bible_tab.css layout; site palette: browns, antiquewhite
   ============================================================ */

/* --- Container (mirrors #bible_tab) --- */
#strongs_tab {
    padding: 1em;
    min-height: 400px;
    display: block;
    overflow-y: auto;
    max-height: calc(90vh - 150px);
    margin-left: calc((100% - 90vw) / 2);
    margin-right: calc((100% - 90vw) / 2);
    min-width: 846px;
}

#strongs_content {
    max-width: 900px;
    margin: 0 auto;
}

/* --- Metadata View --- */
.strongs-metadata-view {
    background-color: antiquewhite;
    border: 1px solid #c8a96e;
    border-radius: 10px;
    padding: 1.5em 2em;
    margin-bottom: 1.5em;
    font-family: sans-serif;
}

.strongs-metadata-view h2 {
    color: brown;
    font-size: 1.5em;
    margin-bottom: 0.75em;
    border-bottom: 2px solid brown;
    padding-bottom: 0.25em;
}

.strongs-metadata-field {
    margin-bottom: 0.6em;
    font-size: small;
    line-height: 1.5;
}

.strongs-metadata-field strong {
    color: #5C3317;
    min-width: 130px;
    display: inline-block;
}

.strongs-metadata-description {
    max-height: 200px;
    overflow-y: auto;
    background: #fff8ee;
    border: 1px solid #d4b896;
    border-radius: 6px;
    padding: 0.5em 0.75em;
    margin-top: 0.25em;
    font-size: inherit;
    line-height: 1.6;
}

/* --- Strong's reference links in verse text --- */
a.strongs-ref {
    font-size: 0.68em;
    vertical-align: super;
    color: #8B4513;
    text-decoration: none;
    cursor: pointer;
    margin: 0 1px;
    font-weight: 600;
    border-bottom: 1px dotted #8B4513;
    transition: color 0.15s;
}

a.strongs-ref:hover {
    text-decoration: underline;
    color: #5C3317;
}

/* --- Definition Panel --- */
.strongs-definition-panel {
    background-color: #fff8ee;
    border: 1px solid #c8a96e;
    border-left: 4px solid brown;
    border-radius: 8px;
    padding: 1em 1.25em;
    margin-top: 1.25em;
    font-family: sans-serif;
    position: relative;
}

.strongs-def-header {
    display: flex;
    align-items: baseline;
    gap: 0.75em;
    margin-bottom: 0.5em;
    flex-wrap: wrap;
}

.strongs-def-id {
    font-weight: bold;
    color: brown;
    font-size: 1.1em;
}

.strongs-def-type {
    font-style: italic;
    color: #5C3317;
    font-size: 0.9em;
    background: #f0dfc0;
    border-radius: 4px;
    padding: 0.1em 0.5em;
}

.strongs-def-lemma {
    font-size: 1.3em;
    font-weight: 600;
    color: #3a1f00;
    margin-bottom: 0.3em;
}

.strongs-def-xlit {
    font-style: italic;
    color: #5C3317;
    margin-bottom: 0.15em;
}


.strongs-def-pronounce {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 0.4em;
}

.strongs-def-pos {
    font-size: 0.85em;
    color: #8B4513;
    font-weight: 600;
    margin-bottom: 0.4em;
}

.strongs-def-description {
    font-size: 1.1em;
    line-height: 1.6;
    color: #222;
    border-top: 1px solid #d4b896;
    padding-top: 0.5em;
    margin-top: 0.4em;
}

.strongs-def-close-btn {
    position: absolute;
    top: 0.5em;
    right: 0.75em;
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: #8B4513;
    line-height: 1;
    padding: 0.1em 0.3em;
    border-radius: 4px;
    transition: background 0.15s;
}

.strongs-def-close-btn:hover {
    background: #f0dfc0;
}

/* --- Disabled Translate Verse button --- */
.strongs-translate-btn[disabled],
.strongs-translate-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Grammatical Definition Styles --- */
.strongs-def-section-title {
    color: #5C3317;
    font-size: 1em;
    margin: 0.3em 0 0.5em 0;
    font-weight: 600;
}

.strongs-def-grammatical-content {
    font-family: monospace;
    font-size: small;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #fff8ee;
    border: 1px solid #d4b896;
    border-radius: 6px;
    padding: 0.75em 1em;
    margin-top: 0.25em;
    color: #222;
    overflow-x: auto;
}

a.strongs-crossref-link {
    color: #8B4513;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}

a.strongs-crossref-link:hover {
    color: #5C3317;
}