/* ── Scripture Interpreter Styles ────────────────────────── */

:root {
    --col-wt:      #e74c3c;
    --col-scholar: #3498db;
    --col-context: #27ae60;
}

.si-view { padding-bottom: 3rem; }

/* ── Search ── */
.si-search-container { max-width: 680px; padding-top: .5rem; }

.si-search-wrap {
    position: relative;
    margin-bottom: 1.5rem;
}

.si-search-input {
    width: 100%;
    padding: .85rem 1.1rem;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-card);
    color: var(--color-text);
    font-size: 1.05rem;
    transition: border-color .15s;
    box-sizing: border-box;
}
.si-search-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* ── Autocomplete dropdown ── */
.si-autocomplete {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 200;
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}
html[data-theme="dark"] .si-autocomplete {
    background: #1e2130;
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.si-autocomplete[hidden] { display: none; }

.si-ac-item {
    padding: .7rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .75rem;
    border-bottom: 1px solid var(--color-border);
    transition: background .1s;
}
.si-ac-item:last-child { border-bottom: none; }
.si-ac-item:hover, .si-ac-item.is-active { background: #f3f4f6; }
html[data-theme="dark"] .si-ac-item:hover,
html[data-theme="dark"] .si-ac-item.is-active { background: rgba(255,255,255,.07); }

.si-ac-ref {
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-heading);
    white-space: nowrap;
}

.si-ac-topic {
    font-size: .82rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.si-ac-cat {
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.si-ac-empty {
    padding: 1rem;
    font-size: .9rem;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

/* ── Category chips ── */
.si-browse-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted);
    margin-bottom: .65rem;
}

.si-categories {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.si-cat-chip {
    padding: .35rem .9rem;
    border-radius: 20px;
    border: 1.5px solid var(--color-border);
    background: transparent;
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.si-cat-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.si-cat-chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ── Back button ── */
.si-back-btn {
    background: none;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: .85rem;
    font-weight: 500;
    padding: .35rem .9rem;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: border-color .15s, color .15s;
}
.si-back-btn:hover { border-color: var(--color-text-muted); color: var(--color-text); }

/* ── Scripture header ── */
.si-scripture-header {
    margin-bottom: 1.5rem;
}

.si-scripture-ref {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--color-heading);
    margin-bottom: .3rem;
}

.si-scripture-topic {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.si-scripture-cat {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 20px;
    color: #fff;
    margin-top: .4rem;
}

/* ── Translation panel ── */
.si-translations {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
}

.si-translations-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted);
    margin-bottom: .75rem;
}

.si-translation-row {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: .5rem .75rem;
    margin-bottom: .6rem;
    align-items: start;
}
.si-translation-row:last-child { margin-bottom: 0; }

.si-trans-label {
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .4rem;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    white-space: nowrap;
    margin-top: .05rem;
}
.si-trans-label.nwt  { background: #e74c3c; }
.si-trans-label.kjv  { background: #6b7280; }
.si-trans-label.web  { background: #3b82f6; }

.si-trans-text {
    font-size: .88rem;
    color: var(--color-text);
    font-style: italic;
    line-height: 1.55;
}

.si-trans-note {
    font-size: .8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    border-top: 1px solid var(--color-border);
    padding-top: .7rem;
    margin-top: .7rem;
}

/* ── Three column mobile tabs ── */
.si-tabs {
    display: none;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1rem;
}

.si-tab-btn {
    flex: 1;
    padding: .6rem .5rem;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    margin-bottom: -2px;
    text-align: center;
}
.si-tab-btn.is-active { color: var(--tab-color, var(--color-accent)); border-bottom-color: var(--tab-color, var(--color-accent)); }

/* ── Three columns ── */
.si-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: start;
}

.si-column {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}
.si-column.is-hidden { display: none; }

.si-col-header {
    padding: .75rem 1rem;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
}
.si-col-header.wt      { background: var(--col-wt); }
.si-col-header.scholar { background: var(--col-scholar); }
.si-col-header.context { background: var(--col-context); }

.si-col-body { padding: 1rem; }

/* Watchtower column */
.si-wt-position {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.5;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-border);
}

.si-wt-source {
    margin-bottom: .75rem;
    font-size: .82rem;
}
.si-wt-source:last-child { margin-bottom: 0; }

.si-wt-source-pub {
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: .15rem;
}

.si-wt-source-cite {
    font-size: .75rem;
    color: var(--color-text-muted);
    margin-bottom: .2rem;
}

.si-wt-source-summary {
    color: var(--color-text);
    line-height: 1.5;
}

/* Scholar column */
.si-scholar-consensus {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.5;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-border);
}

.si-scholar-card {
    margin-bottom: .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--color-border);
    font-size: .82rem;
}
.si-scholar-card:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.si-scholar-name {
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: .1rem;
}

.si-scholar-cred {
    font-size: .74rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: .15rem;
}

.si-scholar-work {
    font-size: .74rem;
    color: var(--color-text-muted);
    margin-bottom: .3rem;
}

.si-scholar-pos {
    color: var(--color-text);
    line-height: 1.5;
}

/* Alternative views */
.si-alt-divider {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--col-scholar);
    border-top: 2px solid var(--col-scholar);
    padding-top: .65rem;
    margin: 1rem 0 .75rem;
}

.si-alt-block {
    background: color-mix(in srgb, var(--col-scholar) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--col-scholar) 25%, transparent);
    border-radius: 8px;
    padding: .8rem .9rem;
    margin-bottom: .75rem;
}
.si-alt-block:last-child { margin-bottom: 0; }

.si-alt-label {
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: color-mix(in srgb, var(--col-scholar) 75%, #000);
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 4px;
    margin-bottom: .5rem;
}

.si-alt-position {
    font-size: .85rem;
    color: var(--color-text);
    line-height: 1.55;
    margin-bottom: .65rem;
}

.si-alt-note {
    font-size: .78rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    border-left: 3px solid color-mix(in srgb, var(--col-scholar) 40%, transparent);
    padding-left: .6rem;
    margin-top: .6rem;
    font-style: italic;
}

/* Context column */
.si-context-section {
    margin-bottom: .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--color-border);
    font-size: .85rem;
}
.si-context-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.si-context-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--col-context);
    margin-bottom: .35rem;
}

.si-context-text {
    color: var(--color-text);
    line-height: 1.6;
}

/* ── Footer links ── */
.si-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--color-border);
}

.si-footer-link {
    font-size: .8rem;
    font-weight: 500;
    padding: .3rem .8rem;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    color: var(--color-accent);
    text-decoration: none;
    transition: background .15s;
}
.si-footer-link:hover { background: var(--color-bg); }

/* ── Related scriptures ── */
.si-related {
    margin-bottom: 1.5rem;
}

.si-related-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted);
    margin-bottom: .6rem;
}

.si-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.si-related-btn {
    padding: .3rem .8rem;
    border-radius: 6px;
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-accent);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.si-related-btn:hover { background: var(--color-bg); border-color: var(--color-accent); }

/* ── Responsive: tablets → 1 col per tab ── */
@media (max-width: 900px) {
    .si-columns { grid-template-columns: 1fr; }
    .si-tabs { display: flex; }
    .si-column { border-radius: 10px; }
}
@media (max-width: 560px) {
    .si-scripture-ref { font-size: 1.35rem; }
    .si-translation-row { grid-template-columns: 3rem 1fr; }
}