/* ============================================================
   Istwanou Literature Map — Styles
   Version: 1.1.0
   ============================================================ */

:root {
    --ilit-bg-dark: #1a1a1a;
    --ilit-bg-panel: #242424;
    --ilit-bg-card: #2e2e2e;
    --ilit-text: #e8e0d4;
    --ilit-text-sec: #a89f94;
    --ilit-text-muted: #6d655c;
    --ilit-gold: #c9a94e;
    --ilit-border: #3a3630;
}

.istwanou-litmap-wrap {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    color: var(--ilit-text);
    background: var(--ilit-bg-dark);
    overflow: hidden;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--ilit-border);
    border-bottom: 1px solid var(--ilit-border);
}

.ilit-header {
    background: linear-gradient(180deg, #2a2520 0%, #1e1b18 100%);
    border-bottom: 1px solid var(--ilit-border);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.ilit-title { font-family: 'Playfair Display', 'Georgia', serif; font-size: 20px; color: var(--ilit-gold); margin: 0; }
.ilit-subtitle { font-size: 11px; color: var(--ilit-text-muted); letter-spacing: 2px; text-transform: uppercase; }
.ilit-stats { display: flex; gap: 16px; font-size: 13px; color: var(--ilit-text-sec); }
.ilit-stats strong { color: var(--ilit-gold); font-weight: 600; }

.ilit-body { display: flex; overflow: hidden; height: calc(100vh - 160px); min-height: 500px; }

.ilit-sidebar { width: 300px; background: var(--ilit-bg-panel); border-right: 1px solid var(--ilit-border); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; }
.ilit-filter-section { padding: 10px 14px; border-bottom: 1px solid var(--ilit-border); }
.ilit-filter-section h3 { font-family: 'Playfair Display', serif; font-size: 11px; color: var(--ilit-gold); margin: 0 0 6px; letter-spacing: 1px; text-transform: uppercase; }
.ilit-filter-group { display: flex; flex-wrap: wrap; gap: 4px; }
.ilit-filter-btn { background: var(--ilit-bg-card); border: 1px solid var(--ilit-border); color: var(--ilit-text-sec); font-size: 11px; padding: 3px 9px; border-radius: 3px; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.ilit-filter-btn:hover { border-color: var(--ilit-gold); color: var(--ilit-text); }
.ilit-filter-btn.active { background: var(--ilit-gold); color: #1a1a1a; border-color: var(--ilit-gold); font-weight: 600; }

/* Progressive disclosure — overflow tier */
.ilit-filter-overflow { display: none; flex-wrap: wrap; gap: 4px; width: 100%; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(58,54,48,0.3); }
.ilit-filter-overflow--open { display: flex; }
.ilit-filter-toggle { background: none; border: none; color: var(--ilit-gold); font-size: 11px; font-family: inherit; cursor: pointer; padding: 4px 2px 2px; margin-top: 4px; width: 100%; text-align: left; opacity: 0.8; transition: opacity 0.15s; }
.ilit-filter-toggle:hover { opacity: 1; }
.ilit-toggle-count { color: var(--ilit-text-muted); font-size: 10px; }

.ilit-search-box { padding: 10px 14px; border-bottom: 1px solid var(--ilit-border); }
.ilit-search-box input { width: 100%; background: var(--ilit-bg-card); border: 1px solid var(--ilit-border); color: var(--ilit-text); padding: 7px 10px; border-radius: 4px; font-size: 13px; font-family: inherit; outline: none; }
.ilit-search-box input::placeholder { color: var(--ilit-text-muted); }
.ilit-search-box input:focus { border-color: var(--ilit-gold); }

.ilit-record-list { flex: 1; overflow-y: auto; }
.ilit-record-list::-webkit-scrollbar { width: 5px; }
.ilit-record-list::-webkit-scrollbar-thumb { background: var(--ilit-border); border-radius: 3px; }

.ilit-rec-item { padding: 9px 14px; cursor: pointer; border-bottom: 1px solid rgba(58,54,48,0.35); transition: background 0.15s; }
.ilit-rec-item:hover { background: rgba(201,169,78,0.07); }
.ilit-rec-item.selected { background: rgba(201,169,78,0.14); border-left: 3px solid var(--ilit-gold); }
.ilit-rec-author { font-family: 'Playfair Display', serif; font-size: 13px; color: var(--ilit-text); }
.ilit-rec-work { font-size: 12px; color: var(--ilit-text-sec); font-style: italic; margin-top: 1px; }
.ilit-rec-meta { font-size: 10px; color: var(--ilit-text-muted); margin-top: 2px; }

.ilit-map-container { flex: 1; position: relative; min-width: 0; }
#ilit-map { width: 100%; height: 100%; background: #1a1a1a; }

/* Leaflet popup overrides */
.istwanou-litmap-wrap .leaflet-popup-content-wrapper { background: var(--ilit-bg-panel) !important; color: var(--ilit-text) !important; border: 1px solid var(--ilit-border) !important; border-radius: 6px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; }
.istwanou-litmap-wrap .leaflet-popup-tip { background: var(--ilit-bg-panel) !important; }
.istwanou-litmap-wrap .leaflet-popup-content { margin: 0 !important; padding: 0 !important; }
.istwanou-litmap-wrap .leaflet-popup-close-button { color: var(--ilit-text-muted) !important; }
.istwanou-litmap-wrap .leaflet-popup-close-button:hover { color: var(--ilit-gold) !important; }
.istwanou-litmap-wrap .leaflet-control-attribution { display: none !important; }

.ilit-popup { padding: 14px; max-width: 360px; max-height: 400px; overflow-y: auto; }
.ilit-popup h3 { font-family: 'Playfair Display', serif; color: var(--ilit-gold); font-size: 17px; margin: 0 0 2px; }
.ilit-popup .ilit-popup-coords { font-size: 11px; color: var(--ilit-text-muted); margin-bottom: 8px; }
.ilit-popup .ilit-popup-record { padding: 8px 0; border-bottom: 1px solid rgba(58,54,48,0.3); }
.ilit-popup .ilit-popup-record:last-child { border-bottom: none; }
.ilit-popup .ilit-pr-author { font-weight: 600; font-size: 13px; color: var(--ilit-text); }
.ilit-popup .ilit-pr-work { font-style: italic; font-size: 12px; color: var(--ilit-text-sec); }
.ilit-popup .ilit-pr-year { font-size: 11px; color: var(--ilit-text-muted); }
.ilit-popup .ilit-pr-type { display: inline-block; font-size: 9px; padding: 1px 6px; border-radius: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; margin-top: 3px; }
.ilit-popup .ilit-pr-notes { font-size: 11px; color: var(--ilit-text-sec); margin-top: 4px; line-height: 1.4; }

.ilit-legend { position: absolute; bottom: 16px; right: 16px; background: rgba(36,36,36,0.92); border: 1px solid var(--ilit-border); border-radius: 6px; padding: 10px 14px; z-index: 800; backdrop-filter: blur(8px); }
.ilit-legend h4 { font-family: 'Playfair Display', serif; font-size: 10px; color: var(--ilit-gold); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 6px; }
.ilit-legend-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ilit-text-sec); padding: 1px 0; }
.ilit-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Theme overrides */
.entry-content .istwanou-litmap-wrap,
.post-content .istwanou-litmap-wrap,
.wp-block-post-content .istwanou-litmap-wrap,
article .istwanou-litmap-wrap,
main .istwanou-litmap-wrap {
    width: 100vw !important; max-width: none !important;
    margin-left: -50vw !important; margin-right: -50vw !important;
    position: relative !important; left: 50% !important; right: 50% !important;
    padding-left: 0 !important; padding-right: 0 !important;
}

@media (max-width: 768px) {
    .ilit-body { flex-direction: column; height: calc(100vh - 120px); }
    .ilit-sidebar { width: 100%; max-height: 200px; overflow-y: auto; }
    .ilit-record-list { display: none; }
    .ilit-legend { display: none; }
    .ilit-header { padding: 10px 16px; }
    .ilit-title { font-size: 17px; }
}