/**
 * Table of Contents (TOC) Styles
 * SOLID principles implementation
 */

/* ========================================
   S - Single Responsibility: Design Tokens
   ======================================== */
:root {
    /* Color System */
    --toc-primary: #dafea4;
    --toc-text: #000;
    --toc-border: #0003;

    /* Spacing System - Tailwind-based Scale */
    /* Base unit: 0.25rem (4px) - matches Tailwind's spacing scale */
    --toc-space-0: 0;
    --toc-space-px: 1px;
    --toc-space-0-5: 0.125rem;  /* 2px */
    --toc-space-1: 0.25rem;     /* 4px */
    --toc-space-1-5: 0.375rem;  /* 6px */
    --toc-space-2: 0.5rem;      /* 8px */
    --toc-space-2-5: 0.625rem;  /* 10px */
    --toc-space-3: 0.75rem;     /* 12px */
    --toc-space-3-5: 0.875rem;  /* 14px */
    --toc-space-4: 1rem;        /* 16px */
    --toc-space-5: 1.25rem;     /* 20px */
    --toc-space-6: 1.5rem;      /* 24px */
    --toc-space-7: 1.75rem;     /* 28px */
    --toc-space-8: 2rem;        /* 32px */
    --toc-space-9: 2.25rem;     /* 36px */
    --toc-space-10: 2.5rem;     /* 40px */
    --toc-space-11: 2.75rem;    /* 44px */
    --toc-space-12: 3rem;       /* 48px */
    --toc-space-14: 3.5rem;     /* 56px */
    --toc-space-16: 4rem;       /* 64px */
    --toc-space-20: 5rem;       /* 80px */
    --toc-space-24: 6rem;       /* 96px */
    --toc-space-28: 7rem;       /* 112px */
    --toc-space-32: 8rem;       /* 128px */
    --toc-space-36: 9rem;       /* 144px */
    --toc-space-40: 10rem;      /* 160px */
    --toc-space-44: 11rem;      /* 176px */
    --toc-space-48: 12rem;      /* 192px */
    --toc-space-52: 13rem;      /* 208px */
    --toc-space-56: 14rem;      /* 224px */
    --toc-space-60: 15rem;      /* 240px */
    --toc-space-64: 16rem;      /* 256px */
    --toc-space-72: 18rem;      /* 288px */
    --toc-space-80: 20rem;      /* 320px */
    --toc-space-96: 24rem;      /* 384px */

    /* Typography */
    --toc-font-weight-normal: 400;
    --toc-font-weight-semibold: 600;

    /* Transitions */
    --toc-transition: all 0.2s ease;

    /* Layout - Using Spacing System */
    --toc-indent-base: var(--toc-space-2);
    --toc-line-text-gap: var(--toc-space-4);
    --toc-line-min-width: var(--toc-space-3);
}

/* ========================================
   S - Single Responsibility: Base Styles
   ======================================== */
.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-item {
    margin: 0;
    padding: 0;
}

.toc-link {
    display: block;
    text-decoration: none;
    color: var(--toc-text);
    margin: 0;
    padding: var(--toc-space-2) var(--toc-space-4);
    transition: var(--toc-transition);
}

/* ========================================
   S - Single Responsibility: State Management
   ======================================== */
.toc-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.toc-link.toc-active {
    background-color: var(--toc-primary);
    font-weight: var(--toc-font-weight-semibold);
}

/* ========================================
   S - Single Responsibility: Layout System
   ======================================== */

/* Base level (no indentation) */
.toc-level-1 {
    margin-left: 0;
}

/* Indented levels (2-8) using CSS custom properties */
.toc-level-2 {
    --toc-level: 1;
}

.toc-level-3 {
    --toc-level: 2;
}

.toc-level-4 {
    --toc-level: 3;
}

.toc-level-5 {
    --toc-level: 4;
}

.toc-level-6 {
    --toc-level: 5;
}

.toc-level-7 {
    --toc-level: 6;
}

.toc-level-8 {
    --toc-level: 7;
}

/* Consolidated styles for indented levels */
.toc-level-2,
.toc-level-3,
.toc-level-4,
.toc-level-5,
.toc-level-6,
.toc-level-7,
.toc-level-8 {
    margin-left: calc(var(--toc-indent-base) * var(--toc-level));
    display: flex;
    align-items: center;
    gap: var(--toc-space-2);
}

/* JavaScript-generated line elements */
.toc-line {
    height: 1px;
    background-color: var(--toc-border);
    pointer-events: none;
    flex-shrink: 0;
    min-width: var(--toc-line-min-width);
}

.toc-line-level-2 { width: max(var(--toc-line-min-width), calc(var(--toc-indent-base) - var(--toc-line-text-gap))); }
.toc-line-level-3 { width: max(var(--toc-line-min-width), calc(var(--toc-indent-base) * 2 - var(--toc-line-text-gap))); }
.toc-line-level-4 { width: max(var(--toc-line-min-width), calc(var(--toc-indent-base) * 3 - var(--toc-line-text-gap))); }
.toc-line-level-5 { width: max(var(--toc-line-min-width), calc(var(--toc-indent-base) * 4 - var(--toc-line-text-gap))); }
.toc-line-level-6 { width: max(var(--toc-line-min-width), calc(var(--toc-indent-base) * 5 - var(--toc-line-text-gap))); }
.toc-line-level-7 { width: max(var(--toc-line-min-width), calc(var(--toc-indent-base) * 6 - var(--toc-line-text-gap))); }
.toc-line-level-8 { width: max(var(--toc-line-min-width), calc(var(--toc-indent-base) * 7 - var(--toc-line-text-gap))); }

/* ========================================
   S - Single Responsibility: Spacing Utilities
   ======================================== */

/* Margin Utilities */
.toc-m-0 { margin: var(--toc-space-0); }
.toc-m-1 { margin: var(--toc-space-1); }
.toc-m-2 { margin: var(--toc-space-2); }
.toc-m-3 { margin: var(--toc-space-3); }
.toc-m-4 { margin: var(--toc-space-4); }
.toc-m-6 { margin: var(--toc-space-6); }
.toc-m-8 { margin: var(--toc-space-8); }

.toc-mx-auto { margin-left: auto; margin-right: auto; }
.toc-my-0 { margin-top: var(--toc-space-0); margin-bottom: var(--toc-space-0); }
.toc-my-2 { margin-top: var(--toc-space-2); margin-bottom: var(--toc-space-2); }
.toc-my-4 { margin-top: var(--toc-space-4); margin-bottom: var(--toc-space-4); }

/* Padding Utilities */
.toc-p-0 { padding: var(--toc-space-0); }
.toc-p-1 { padding: var(--toc-space-1); }
.toc-p-2 { padding: var(--toc-space-2); }
.toc-p-3 { padding: var(--toc-space-3); }
.toc-p-4 { padding: var(--toc-space-4); }
.toc-p-6 { padding: var(--toc-space-6); }
.toc-p-8 { padding: var(--toc-space-8); }

.toc-px-2 { padding-left: var(--toc-space-2); padding-right: var(--toc-space-2); }
.toc-px-3 { padding-left: var(--toc-space-3); padding-right: var(--toc-space-3); }
.toc-px-4 { padding-left: var(--toc-space-4); padding-right: var(--toc-space-4); }
.toc-py-1 { padding-top: var(--toc-space-1); padding-bottom: var(--toc-space-1); }
.toc-py-2 { padding-top: var(--toc-space-2); padding-bottom: var(--toc-space-2); }
.toc-py-3 { padding-top: var(--toc-space-3); padding-bottom: var(--toc-space-3); }

/* Gap Utilities */
.toc-gap-0 { gap: var(--toc-space-0); }
.toc-gap-1 { gap: var(--toc-space-1); }
.toc-gap-2 { gap: var(--toc-space-2); }
.toc-gap-3 { gap: var(--toc-space-3); }
.toc-gap-4 { gap: var(--toc-space-4); }
.toc-gap-6 { gap: var(--toc-space-6); }
.toc-gap-8 { gap: var(--toc-space-8); }

/* ========================================
   S - Single Responsibility: Debug Crosshair
   ======================================== */
.toc-debug-crosshair {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: red;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.7;
}

.toc-debug-crosshair-vertical {
    position: fixed;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100vh;
    background: red;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.7;
}

.toc-debug-crosshair.toc-debug-crosshair-hidden,
.toc-debug-crosshair-vertical.toc-debug-crosshair-hidden {
    display: none !important;
}

/* ========================================
   S - Single Responsibility: Separators
   ======================================== */

/* ========================================
   S - Single Responsibility: Responsive Design
   ======================================== */
@media (max-width: 768px) {
    [data-toc-container] {
        position: static;
        max-height: none;
        margin: var(--toc-space-4) 0;
    }
}

/* ========================================
   S - Single Responsibility: Print Styles
   ======================================== */
@media print {
    [data-toc-container] {
        position: static;
        max-height: none;
        background: none;
        border: none;
    }

    .toc-link {
        color: #000;
        text-decoration: underline;
    }

    .toc-link.toc-active {
        background: none;
        color: #000;
        font-weight: var(--toc-font-weight-semibold);
    }
}