/* ============================================

   PHILOSOPHER SIDEBAR LAYOUT

   ============================================ */



/* Reset and base */

.philosophy-chain-single {

    max-width: 100%;

    margin: 0;

    padding: 0;

}



/* Hero Section - Always Visible */

.philosopher-hero {

    background: linear-gradient(135deg, #2d5016 0%, #3a6b1c 100%);

    color: white;

    padding: 40px;

    margin-bottom: 0;

}



.philosopher-hero-content {

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 30px;

}



.philosopher-hero-portrait {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    object-fit: cover;

    border: 4px solid white;

    flex-shrink: 0;

}



.philosopher-hero-info {

    flex: 1;

}



.philosopher-hero-name {

    font-size: 36px;

    font-weight: 700;

    margin: 0 0 8px 0;

    line-height: 1.2;

}



.philosopher-hero-dates {

    font-size: 18px;

    opacity: 0.9;

    margin: 0 0 16px 0;

}



.philosopher-hero-nutshell {

    font-size: 16px;

    line-height: 1.6;

    opacity: 0.95;

    margin: 0 0 12px 0;

    font-style: italic;

}



.philosopher-hero-difficulty {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(255, 255, 255, 0.2);

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 14px;

}



.philosopher-hero-difficulty-dots {

    display: flex;

    gap: 4px;

}



.philosopher-hero-difficulty-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.4);

}



.philosopher-hero-difficulty-dot.filled {

    background: white;

}



/* Main Layout Container */

.philosopher-layout {

    display: flex;

    max-width: 1400px;

    margin: 0 auto;

    min-height: calc(100vh - 300px);

    position: relative;

}



/* Sidebar Navigation */

.philosopher-sidebar {

    width: 260px;

    background: #f8f9fa;

    border-right: 2px solid #e9ecef;

    position: sticky;

    top: 0;

    height: calc(100vh - 200px);

    overflow-y: auto;

    flex-shrink: 0;

}



.philosopher-sidebar-nav {

    list-style: none;

    margin: 0;

    padding: 20px 0;

}



.philosopher-sidebar-item {

    margin: 0;

}



.philosopher-sidebar-link {

    display: block;

    padding: 12px 24px;

    color: #495057;

    text-decoration: none;

    font-weight: 500;

    font-size: 15px;

    transition: all 0.2s ease;

    border-left: 3px solid transparent;

}



.philosopher-sidebar-link:hover {

    background: #e9ecef;

    color: #2d5016;

}



.philosopher-sidebar-link.active {

    background: #fff;

    color: #2d5016;

    border-left-color: #2d5016;

}



/* Content Area */

.philosopher-content-area {

    flex: 1;

    display: flex;

    position: relative;

    background: white;

}



/* Content Panels */

.philosopher-panels {

    flex: 1;

    display: flex;

    gap: 2px;

    background: #e9ecef;

}



.philosopher-panel {

    flex: 1;

    background: white;

    display: flex;

    flex-direction: column;

    min-width: 300px;

}



.philosopher-panel-header {

    padding: 20px 24px;

    background: #f8f9fa;

    border-bottom: 2px solid #e9ecef;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.philosopher-panel-title {

    font-size: 20px;

    font-weight: 600;

    color: #212529;

    margin: 0;

}



.philosopher-panel-actions {

    display: flex;

    gap: 8px;

}



.philosopher-panel-btn {

    background: white;

    border: 1px solid #dee2e6;

    color: #495057;

    padding: 6px 12px;

    border-radius: 4px;

    font-size: 13px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: all 0.2s ease;

}



.philosopher-panel-btn:hover {

    background: #2d5016;

    color: white;

    border-color: #2d5016;

}



.philosopher-panel-btn-split {

    font-weight: 500;

}



.philosopher-panel-btn-close {

    color: #dc3545;

}



.philosopher-panel-btn-close:hover {

    background: #dc3545;

    color: white;

    border-color: #dc3545;

}



.philosopher-panel-content {

    flex: 1;

    padding: 32px;

    overflow-y: auto;

}



/* Content Sections */

.philosopher-section-content {

    max-width: 800px;

}



.philosopher-subsection {

    margin-bottom: 32px;

}



.philosopher-subsection:last-child {

    margin-bottom: 0;

}



.philosopher-subsection-title {

    font-size: 16px;

    font-weight: 600;

    color: #2d5016;

    margin: 0 0 12px 0;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.philosopher-subsection-content {

    color: #495057;

    line-height: 1.7;

    font-size: 15px;

}



/* Quick Facts */

.philosopher-quick-facts {

    background: #f8f9fa;

    border-left: 4px solid #2d5016;

    padding: 16px 20px;

    margin-bottom: 24px;

}



.philosopher-quick-facts-item {

    display: flex;

    margin-bottom: 8px;

    font-size: 14px;

}



.philosopher-quick-facts-item:last-child {

    margin-bottom: 0;

}



.philosopher-quick-facts-label {

    font-weight: 600;

    color: #2d5016;

    min-width: 100px;

}



.philosopher-quick-facts-value {

    color: #495057;

}



/* Read More */

.philosopher-content-preview {

    position: relative;

}



.philosopher-content-preview.collapsed .philosopher-content-full {

    display: none;

}



.philosopher-read-more {

    display: inline-block;

    margin-top: 12px;

    padding: 8px 16px;

    background: #2d5016;

    color: white;

    border: none;

    border-radius: 4px;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.2s ease;

}



.philosopher-read-more:hover {

    background: #3a6b1c;

    transform: translateY(-1px);

}



/* Classification Badges */

.philosopher-classification-group {

    margin-bottom: 20px;

}



.philosopher-classification-label {

    font-weight: 600;

    color: #2d5016;

    font-size: 14px;

    margin-bottom: 8px;

    display: block;

}



.philosopher-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.philosopher-badge {

    display: inline-block;

    padding: 6px 14px;

    background: #e9ecef;

    color: #495057;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 500;

}



.philosopher-badge-epoch {

    background: #d4edda;

    color: #155724;

}



.philosopher-badge-school {

    background: #d1ecf1;

    color: #0c5460;

}



.philosopher-badge-container {

    background: #fff3cd;

    color: #856404;

}



.philosopher-badge-thread {

    background: #f8d7da;

    color: #721c24;

}



/* Connection Panels */

.philosopher-connection-panels {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

    margin-bottom: 32px;

}



.philosopher-connection-panel {

    background: #f8f9fa;

    border-radius: 8px;

    padding: 20px;

    border-left: 4px solid #2d5016;

}



.philosopher-connection-panel-responds {

    border-left-color: #28a745;

    background: #d4edda;

}



.philosopher-connection-panel-influences {

    border-left-color: #007bff;

    background: #d1ecf1;

}



.philosopher-connection-panel-argues {

    border-left-color: #dc3545;

    background: #f8d7da;

}



.philosopher-connection-panel-title {

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    margin: 0 0 12px 0;

    letter-spacing: 0.5px;

}



.philosopher-connection-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.philosopher-connection-list-item {

    margin-bottom: 8px;

}



.philosopher-connection-list-item:last-child {

    margin-bottom: 0;

}



.philosopher-connection-list-item a {

    color: #495057;

    text-decoration: none;

    font-weight: 500;

}



.philosopher-connection-list-item a:hover {

    color: #2d5016;

    text-decoration: underline;

}



/* Contemporaries Grid */

.philosopher-contemporaries-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: 16px;

    margin-top: 20px;

}



.philosopher-contemporary-card {

    text-align: center;

    text-decoration: none;

    color: inherit;

    transition: transform 0.2s ease;

}



.philosopher-contemporary-card:hover {

    transform: translateY(-4px);

}



.philosopher-contemporary-portrait {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #2d5016;

    margin: 0 auto 8px;

}



.philosopher-contemporary-name {

    font-size: 13px;

    font-weight: 500;

    color: #495057;

}



/* Quotes */

.philosopher-quotes-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.philosopher-quote-item {

    background: #f8f9fa;

    border-left: 4px solid #2d5016;

    padding: 20px;

    margin-bottom: 16px;

    border-radius: 0 8px 8px 0;

}



.philosopher-quote-text {

    font-size: 16px;

    font-style: italic;

    color: #212529;

    margin: 0 0 12px 0;

    line-height: 1.6;

}



.philosopher-quote-context {

    font-size: 13px;

    color: #6c757d;

    font-style: normal;

}



/* Works */

.philosopher-works-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.philosopher-work-item {

    padding: 16px 0;

    border-bottom: 1px solid #e9ecef;

}



.philosopher-work-item:last-child {

    border-bottom: none;

}



.philosopher-work-title {

    font-size: 16px;

    font-weight: 600;

    color: #212529;

    margin: 0 0 6px 0;

}



.philosopher-work-description {

    font-size: 14px;

    color: #6c757d;

    margin: 0;

}



.philosopher-work-masterwork {

    background: #fff3cd;

    border-left: 4px solid #ffc107;

    padding: 20px;

    border-radius: 0 8px 8px 0;

    margin-bottom: 24px;

}



/* Ratings */

.philosopher-ratings-grid {

    margin-top: 24px;

}



.philosopher-rating-row {

    display: flex;

    align-items: center;

    padding: 12px 0;

    border-bottom: 1px solid #e9ecef;

}



.philosopher-rating-row:last-child {

    border-bottom: none;

}



.philosopher-rating-label {

    flex: 0 0 140px;

    font-weight: 500;

    color: #495057;

    font-size: 14px;

}



.philosopher-rating-dots {

    flex: 1;

    display: flex;

    gap: 6px;

}



.philosopher-rating-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #e9ecef;

    color: #2d5016;

}



.philosopher-rating-dot.filled {

    background: #2d5016;

}



.philosopher-rating-value {

    flex: 0 0 50px;

    text-align: right;

    font-weight: 600;

    color: #2d5016;

    font-size: 14px;

}



.philosopher-rating-overall {

    margin-top: 20px;

    padding-top: 20px;

    border-top: 2px solid #2d5016;

    display: flex;

    align-items: center;

    gap: 16px;

}



.philosopher-rating-overall-bar {

    flex: 1;

    height: 24px;

    background: #e9ecef;

    border-radius: 12px;

    overflow: hidden;

}



.philosopher-rating-overall-fill {

    height: 100%;

    background: linear-gradient(90deg, #2d5016, #3a6b1c);

    transition: width 0.3s ease;

}



.philosopher-rating-overall-score {

    font-size: 24px;

    font-weight: 700;

    color: #2d5016;

}



/* Verdict */

.philosopher-verdict-text {

    font-size: 18px;

    font-style: italic;

    color: #2d5016;

    background: #f8f9fa;

    padding: 20px;

    border-left: 4px solid #2d5016;

    border-radius: 0 8px 8px 0;

    margin-bottom: 24px;

}



/* Empty State */

.philosopher-empty-state {

    text-align: center;

    padding: 60px 20px;

    color: #6c757d;

}



.philosopher-empty-state-icon {

    font-size: 48px;

    opacity: 0.3;

    margin-bottom: 16px;

}



.philosopher-empty-state-text {

    font-size: 15px;

}



/* Notepad Toggle */

.philosopher-notepad-toggle {

    position: fixed;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 40px;

    height: 120px;

    background: #2d5016;

    border-radius: 8px 0 0 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 998;

    transition: all 0.3s ease;

    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);

}



.philosopher-notepad-toggle:hover {

    background: #3a6b1c;

    width: 45px;

}



.philosopher-notepad-toggle-icon {

    color: white;

    font-size: 20px;

    writing-mode: vertical-rl;

    text-orientation: mixed;

}



/* Notepad Sidebar */

.philosopher-notepad-sidebar {

    position: fixed;

    right: -400px;

    top: 0;

    width: 400px;

    height: 100vh;

    background: white;

    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);

    z-index: 999;

    transition: right 0.3s ease;

    display: flex;

    flex-direction: column;

}



.philosopher-notepad-sidebar.active {

    right: 0;

}



.philosopher-notepad-sidebar .notepad-header {

    border-radius: 0;

}



/* Mobile Styles */

@media (max-width: 1200px) {

    .philosopher-layout {

        flex-direction: column;

    }

    

    .philosopher-sidebar {

        width: 100%;

        position: static;

        height: auto;

        border-right: none;

        border-bottom: 2px solid #e9ecef;

    }

    

    .philosopher-sidebar-nav {

        display: flex;

        overflow-x: auto;

        padding: 0;

    }

    

    .philosopher-sidebar-item {

        flex-shrink: 0;

    }

    

    .philosopher-sidebar-link {

        border-left: none;

        border-bottom: 3px solid transparent;

        white-space: nowrap;

    }

    

    .philosopher-sidebar-link.active {

        border-left: none;

        border-bottom-color: #2d5016;

    }

    

    .philosopher-panels {

        flex-direction: column;

    }

    

    .philosopher-panel {

        min-width: 100%;

    }

    

    .philosopher-connection-panels {

        grid-template-columns: 1fr;

    }

    

    .philosopher-contemporaries-grid {

        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

    }

}



@media (max-width: 768px) {

    .philosopher-hero {

        padding: 24px 20px;

    }

    

    .philosopher-hero-content {

        flex-direction: column;

        text-align: center;

    }

    

    .philosopher-hero-name {

        font-size: 28px;

    }

    

    .philosopher-panel-content {

        padding: 20px;

    }

    

    .philosopher-notepad-sidebar {

        width: 100%;

        right: -100%;

    }

    

    .philosopher-notepad-toggle {

        bottom: 20px;

        top: auto;

        right: 20px;

        transform: none;

        width: 56px;

        height: 56px;

        border-radius: 50%;

    }

    

    .philosopher-notepad-toggle-icon {

        writing-mode: horizontal-tb;

    }

}

/* Unavailable philosopher — linked post is not published */

.philosopher-connection-unavailable {

    color: #aaa;

    font-style: italic;

    font-size: 0.9em;

    cursor: default;

}

.philosopher-connection-unavailable::after {

    content: ' (unavailable)';

    font-size: 0.85em;

    opacity: 0.7;

}