/**
 * Biblical Names Page - Mechanical Bible
 * Only layout/component specifics. Theme colors inherit from egyptian-theme.css.
 */

/* Hero override already defined in base — only keep if different */
.names-page .stats-bar { letter-spacing: 1px; }

/* Controls — layout only, colors inherit */
.controls {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.controls input, .controls select {
    padding: 10px 15px;
    background: rgba(20,15,10,0.9);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}
.controls input:focus, .controls select:focus {
    border-color: #d4af37;
    box-shadow: 0 0 10px rgba(212,175,55,0.3);
}
.controls input { flex: 1; min-width: 200px; }

.view-toggle { display: flex; gap: 5px; }
.view-toggle button {
    padding: 10px 18px;
    background: rgba(20,15,10,0.8);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s ease;
}
.view-toggle button.active, .view-toggle button:hover {
    background: rgba(212,175,55,0.2);
    border-color: #d4af37;
}

/* Message panel */
.message-panel {
    background: rgba(20,15,10,0.9);
    border: 1px solid rgba(212,175,55,0.5);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
}
.message-panel h2 { font-size: 1.3em; margin-bottom: 15px; letter-spacing: 2px; }
.message-panel .sequence { font-size: 1.1em; line-height: 2; color: #e0c070; }
.message-panel .sequence .name-meaning {
    display: inline-block;
    padding: 3px 8px;
    margin: 2px;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.message-panel .sequence .name-meaning:hover {
    background: rgba(212,175,55,0.3);
    border-color: #d4af37;
}
.gematria-stream {
    margin-top: 15px;
    font-family: 'Courier New', monospace;
    font-size: 1em;
    word-spacing: 8px;
    letter-spacing: 1px;
}

/* Gematria Twins — unique purple theme, can't inherit gold */
.twins-panel {
    background: rgba(20,15,10,0.9);
    border: 1px solid rgba(120,80,200,0.4);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    display: none;
}
.twins-panel.visible { display: block; }
.twins-panel h2 { color: #9070d0; font-size: 1.2em; margin-bottom: 15px; letter-spacing: 2px; }
.twins-list { display: flex; flex-wrap: wrap; gap: 10px; }
.twin-group {
    background: rgba(120,80,200,0.1);
    border: 1px solid rgba(120,80,200,0.3);
    border-radius: 6px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.twin-group:hover { border-color: #9070d0; background: rgba(120,80,200,0.2); }
.twin-group .twin-value { font-family: 'Courier New', monospace; font-size: 1.3em; color: #9070d0; font-weight: bold; }
.twin-group .twin-names { font-size: 12px; margin-top: 3px; }

/* Names Table — layout + column sizing */
.names-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.names-table th {
    background: rgba(212,175,55,0.15);
    padding: 12px 8px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(212,175,55,0.4);
    position: sticky;
    top: 0;
    z-index: 10;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.names-table th:hover { color: #fff; }
.names-table th.sorted-asc::after { content: ' ^'; }
.names-table th.sorted-desc::after { content: ' v'; }
.names-table td {
    padding: 8px;
    border-bottom: 1px solid rgba(212,175,55,0.1);
    font-size: 13px;
    vertical-align: top;
}
.names-table tr:hover { background: rgba(212,175,55,0.05); }
.names-table .hebrew-cell {
    font-size: 1.4em;
    direction: rtl;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.names-table .hebrew-cell:hover { text-shadow: 0 0 15px rgba(212,175,55,0.8); color: #fff; }
.names-table .gematria-cell { font-family: 'Courier New', monospace; color: #e0c070; font-weight: bold; text-align: center; }
.names-table .dr-cell { font-family: 'Courier New', monospace; text-align: center; }
.names-table .ref-cell { font-size: 12px; }
.names-table .pictographic-cell { font-size: 11px; max-width: 280px; }
.names-table .definition-cell { font-size: 12px; max-width: 220px; }
.names-table .order-cell { font-size: 12px; text-align: center; }
.names-table .freq-cell { font-family: 'Courier New', monospace; text-align: center; font-size: 12px; }
.freq-bar {
    display: inline-block;
    height: 3px;
    background: linear-gradient(90deg, rgba(212,175,55,0.4), #d4af37);
    border-radius: 2px;
    vertical-align: middle;
    margin-left: 4px;
}
.names-table .cat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cat-person { background: rgba(212,175,55,0.15); color: #d4af37; }
.cat-place { background: rgba(55,175,212,0.15); color: #37afd4; }
.cat-people { background: rgba(175,55,212,0.15); color: #af37d4; }

/* Card View */
.names-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 20px;
}
.name-card {
    background: rgba(20,15,10,0.8);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.name-card:hover { border-color: #d4af37; box-shadow: 0 0 20px rgba(212,175,55,0.2); transform: translateY(-2px); }
.name-card .card-hebrew { font-size: 2em; direction: rtl; text-align: center; margin-bottom: 5px; }
.name-card .card-english { text-align: center; font-size: 1.1em; color: #e0c070; margin-bottom: 3px; }
.name-card .card-definition { text-align: center; font-size: 12px; font-style: italic; margin-bottom: 8px; min-height: 18px; }
.name-card .card-gematria { text-align: center; font-family: 'Courier New', monospace; font-size: 1.3em; margin-bottom: 5px; }
.name-card .card-frequency { text-align: center; font-size: 11px; margin-bottom: 8px; }
.name-card .card-pictographic { font-size: 11px; text-align: center; line-height: 1.5; margin-bottom: 5px; }
.name-card .card-letters { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.letter-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 4px;
}
.letter-chip .lc-char { font-size: 1.4em; direction: rtl; }
.letter-chip .lc-name { font-size: 8px; text-transform: uppercase; }
.letter-chip .lc-pic { font-size: 8px; }
.name-card .card-ref { font-size: 11px; text-align: center; margin-top: 5px; }

/* Gematria chip view */
.gematria-view { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.gematria-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: rgba(20,15,10,0.8);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.gematria-chip:hover { border-color: #d4af37; background: rgba(212,175,55,0.15); }
.gematria-chip .chip-num { font-family: 'Courier New', monospace; font-size: 1.2em; font-weight: bold; }
.gematria-chip .chip-name { font-size: 10px; }
.gematria-chip .chip-def { font-size: 8px; max-width: 80px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Back link */
.back-link {
    display: inline-block;
    color: #a08040;
    text-decoration: none;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid rgba(212,175,55,0.3);
    padding: 6px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.back-link:hover {
    border-color: #d4af37;
    color: #d4af37;
    background: rgba(212,175,55,0.1);
}

/* Hidden message full sentence */
.message-full {
    margin-bottom: 15px;
    color: #e0c070;
    font-size: 1.15em;
    font-style: italic;
}

/* Clickable English names in table */
.names-table .english-cell {
    cursor: pointer;
    transition: color 0.3s ease;
}
.names-table .english-cell:hover { color: #d4af37; }

.hidden { display: none; }

/* Section header override for names page */
.names-page .section-header { font-size: 16px; margin: 30px 0 15px; gap: 15px; }

/* Names page overrides for wider container */
.names-page .container { max-width: 1600px; padding: 40px 20px; }
.names-page .hero { padding: 40px 20px; }
.names-page h1 { font-size: 2.5em; }
.names-page .subtitle { font-size: 1.2em; }
.names-page body, .names-page { line-height: 1.8; }

/* Count */
.count-display {
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 6px;
    padding: 8px 15px;
    font-size: 13px;
}
.sort-info { font-size: 11px; margin-left: 10px; }

/* Loading */
.loading { text-align: center; padding: 60px; font-size: 1.2em; }
.loading::after { content: ''; animation: dots 1.5s infinite; }
@keyframes dots { 0% { content: ''; } 33% { content: '.'; } 66% { content: '..'; } 100% { content: '...'; } }

/* Responsive */
@media (max-width: 768px) {
    .controls { flex-direction: column; }
    .controls input { min-width: 100%; }
    .names-table { font-size: 11px; }
    .names-table td, .names-table th { padding: 5px 3px; }
    .names-table .pictographic-cell, .names-table .definition-cell { display: none; }
    .name-card .card-letters { display: none; }
}
@media (max-width: 480px) { .names-table .freq-cell { display: none; } }