/* COA Master Handbook Main Styling Cascade Layers */
@layer tokens, base, layout, components, utilities, overrides;

@layer base {
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    *:focus-visible {
        outline: var(--outline-ring);
        outline-offset: var(--outline-offset);
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: var(--font-family);
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);
        color: var(--color-text-main);
        background-color: var(--color-bg-base);
        transition: background-color var(--transition-duration) var(--transition-easing),
                    color var(--transition-duration) var(--transition-easing);
    }

    /* Typography */
    h1, h2, h3, h4, h5, h6 {
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-tight);
        color: var(--color-text-main);
        margin-bottom: var(--spacing-4);
    }

    h1 { font-size: var(--font-size-3xl); letter-spacing: -0.02em; }
    h2 { font-size: var(--font-size-2xl); margin-top: var(--spacing-12); border-bottom: 1px solid var(--color-bg-border); padding-bottom: var(--spacing-2); }
    h3 { font-size: var(--font-size-xl); margin-top: var(--spacing-8); }
    h4 { font-size: var(--font-size-lg); margin-top: var(--spacing-6); }

    p {
        margin-bottom: var(--spacing-6);
        max-width: 72ch; /* Premium reading line length limit */
    }

    ul, ol {
        margin-bottom: var(--spacing-6);
        padding-left: var(--spacing-6);
    }

    li {
        margin-bottom: var(--spacing-2);
    }

    a {
        color: var(--color-primary);
        text-decoration: none;
        font-weight: var(--font-weight-medium);
        transition: var(--transition-base);
    }

    a:hover {
        color: var(--color-primary-hover);
        text-decoration: underline;
    }

    code {
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.9em;
        background-color: var(--color-bg-surface);
        padding: var(--spacing-1) var(--spacing-2);
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-sm);
    }
}

@layer layout {
    .l-app-container {
        display: grid;
        grid-template-areas: 
            "header header"
            "sidebar main"
            "footer footer";
        grid-template-rows: 64px 1fr auto;
        grid-template-columns: 280px 1fr;
        min-height: 100vh;
    }

    /* Fixed Top Header */
    .l-header {
        grid-area: header;
        background-color: var(--color-bg-surface);
        border-bottom: 1px solid var(--color-bg-border);
        position: sticky;
        top: 0;
        z-index: 200;
        height: 64px;
    }

    .l-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 0 var(--spacing-6);
    }

    .c-logo-container {
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
    }

    .c-logo-text {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-lg);
        color: var(--color-primary);
    }

    .c-header-controls {
        display: flex;
        align-items: center;
        gap: var(--spacing-4);
    }

    /* Left Sidebar Navigation */
    .l-sidebar {
        grid-area: sidebar;
        background-color: var(--color-bg-surface);
        border-right: 1px solid var(--color-bg-border);
        overflow-y: auto;
        position: sticky;
        top: 64px;
        height: calc(100vh - 64px);
        transition: transform var(--transition-duration) var(--transition-easing);
    }

    /* Main Container with Grid */
    .l-main-content {
        grid-area: main;
        padding: var(--spacing-8) var(--spacing-12);
        background-color: var(--color-bg-base);
    }

    /* Splitting main column into: [Reading Column | Table of Contents Column] */
    .l-content-grid {
        display: grid;
        grid-template-columns: 1fr 240px;
        gap: var(--spacing-12);
        max-width: 1100px;
        margin: 0 auto;
    }

    .l-reading-column {
        min-width: 0; /* Prevents overflow grid blowing */
    }

    /* Floating right Table of Contents Panel */
    .l-toc-panel {
        position: sticky;
        top: 96px;
        height: fit-content;
    }

    .c-toc-title {
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-4);
    }

    .c-toc-list {
        list-style: none;
        padding-left: 0;
        border-left: 1px solid var(--color-bg-border);
    }

    .c-toc-item {
        margin-bottom: 0;
    }

    .c-toc-link {
        display: block;
        padding: var(--spacing-1) 0 var(--spacing-1) var(--spacing-4);
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        font-weight: var(--font-weight-normal);
        border-left: 2px solid transparent;
        margin-left: -1px; /* Align overlay border */
    }

    .c-toc-link:hover, .c-toc-link.is-active {
        color: var(--color-primary);
        border-left-color: var(--color-primary);
        text-decoration: none;
    }

    /* Dynamic indentation for H3 subheadings in TOC */
    .c-toc-link--h3 {
        padding-left: var(--spacing-8);
    }

    /* Global Footer */
    .l-footer {
        grid-area: footer;
        background-color: var(--color-bg-surface);
        border-top: 1px solid var(--color-bg-border);
        padding: var(--spacing-8);
        text-align: center;
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
    }

    /* Hamburger trigger for mobile */
    .c-hamburger {
        display: none;
        background: transparent;
        border: none;
        font-size: 1.5rem;
        color: var(--color-text-main);
        padding: var(--spacing-2);
    }

    /* Responsive adjustments */
    @media (max-width: 1024px) {
        .l-content-grid {
            grid-template-columns: 1fr; /* Hide right TOC panel on tablets */
        }
        .l-toc-panel {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .l-app-container {
            grid-template-areas: 
                "header"
                "main"
                "footer";
            grid-template-columns: 1fr;
        }

        .c-hamburger {
            display: inline-block; /* Reveal toggle button */
        }

        .l-sidebar {
            position: fixed;
            left: 0;
            z-index: 150;
            transform: translateX(-100%);
            width: 280px;
        }

        .l-sidebar.is-open {
            transform: translateX(0);
        }

        .l-main-content {
            padding: var(--spacing-6) var(--spacing-4);
        }
    }
}

@layer components {
    /* Accessibility skip link */
    .c-skip-link {
        position: absolute;
        top: -100px;
        left: var(--spacing-4);
        background-color: var(--color-primary);
        color: var(--color-text-light);
        padding: var(--spacing-2) var(--spacing-4);
        border-radius: var(--radius-sm);
        z-index: 999;
        transition: top 0.2s;
    }

    .c-skip-link:focus {
        top: var(--spacing-4);
    }

    /* Sidebar Navigation Tree */
    .c-navigation {
        padding: var(--spacing-4) 0;
    }

    .c-nav-list {
        list-style: none;
        padding-left: 0;
    }

    .c-nav-module-title {
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
        padding: var(--spacing-4) var(--spacing-6) var(--spacing-2);
        font-weight: var(--font-weight-bold);
    }

    .c-nav-unit-title {
        font-size: var(--font-size-sm);
        color: var(--color-text-main);
        padding: var(--spacing-2) var(--spacing-6);
        font-weight: var(--font-weight-semibold);
    }

    .c-nav-link {
        display: block;
        padding: var(--spacing-2) var(--spacing-8);
        color: var(--color-text-muted);
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-sm);
        border-left: 3px solid transparent;
        transition: var(--transition-base);
    }

    .c-nav-link:hover, .c-nav-link.is-active {
        color: var(--color-primary);
        background-color: var(--color-primary-light);
        text-decoration: none;
        border-left-color: var(--color-primary);
    }

    /* Buttons */
    .c-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-2) var(--spacing-4);
        border-radius: var(--radius-md);
        border: var(--border-width-thin) solid var(--color-bg-border);
        background-color: var(--color-bg-surface);
        color: var(--color-text-main);
        font-weight: var(--font-weight-medium);
        transition: var(--transition-base);
    }

    .c-btn:hover {
        background-color: var(--color-bg-border);
    }

    .c-btn--primary {
        background-color: var(--color-primary);
        color: var(--color-text-light);
        border-color: transparent;
    }

    .c-btn--primary:hover {
        background-color: var(--color-primary-hover);
    }

    .c-btn--icon {
        padding: var(--spacing-2);
        border-radius: 50%;
        background-color: transparent;
        border-color: transparent;
    }

    .c-btn--icon:hover {
        background-color: var(--color-bg-border);
    }

    /* Breadcrumbs */
    .c-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding-left: 0;
        margin-bottom: var(--spacing-8);
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

    .c-breadcrumbs__item + .c-breadcrumbs__item::before {
        content: "/";
        padding: 0 var(--spacing-2);
        color: var(--color-bg-border);
    }

    .c-breadcrumbs__link {
        color: var(--color-text-muted);
        font-weight: var(--font-weight-normal);
    }

    .c-breadcrumbs__link:hover {
        color: var(--color-primary);
    }

    .c-breadcrumbs__item--active {
        color: var(--color-text-main);
        font-weight: var(--font-weight-semibold);
    }

    /* Callouts & Alerts */
    .c-callout {
        display: flex;
        gap: var(--spacing-4);
        padding: var(--spacing-4) var(--spacing-6);
        border-radius: var(--radius-md);
        border-left: 4px solid var(--color-primary);
        background-color: var(--color-primary-light);
        margin-bottom: var(--spacing-6);
    }

    .c-callout-icon {
        font-size: var(--font-size-xl);
        flex-shrink: 0;
    }

    .c-callout-body {
        flex-grow: 1;
    }

    .c-callout-title {
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--spacing-1);
        margin-top: 0;
        font-size: var(--font-size-lg);
    }

    /* Variant: Success */
    .c-callout--success {
        border-left-color: var(--color-success);
        background-color: var(--color-success-light);
    }

    /* Variant: Warning */
    .c-callout--warning {
        border-left-color: var(--color-warning);
        background-color: var(--color-warning-light);
    }

    /* Variant: Danger */
    .c-callout--danger {
        border-left-color: var(--color-danger);
        background-color: var(--color-danger-light);
    }

    /* Cards */
    .c-card {
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-6);
        margin-bottom: var(--spacing-8);
        box-shadow: var(--shadow-sm);
    }

    .c-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-4);
    }

    .c-card-badge {
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background-color: var(--color-primary-light);
        color: var(--color-primary);
        padding: var(--spacing-1) var(--spacing-3);
        border-radius: var(--radius-sm);
        font-weight: var(--font-weight-bold);
    }

    .c-card-title {
        margin: 0;
        font-size: var(--font-size-xl);
    }

    /* Variant: Example */
    .c-card--example {
        border-left: 4px solid var(--color-secondary);
    }

    /* Reusable HTML Tables */
    .c-table-wrapper {
        overflow-x: auto;
        margin-bottom: var(--spacing-8);
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-md);
    }

    .c-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        font-size: var(--font-size-sm);
    }

    .c-table th, .c-table td {
        padding: var(--spacing-3) var(--spacing-4);
        border-bottom: 1px solid var(--color-bg-border);
    }

    .c-table th {
        background-color: var(--color-bg-surface);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-main);
    }

    .c-table tbody tr:hover {
        background-color: var(--color-primary-light);
    }

    /* Code Blocks */
    .c-code-block {
        position: relative;
        margin-bottom: var(--spacing-8);
        border-radius: var(--radius-md);
        overflow: hidden;
        border: 1px solid var(--color-bg-border);
        background-color: var(--color-bg-surface);
    }

    .c-code-block__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-2) var(--spacing-4);
        background-color: var(--color-bg-surface);
        border-bottom: 1px solid var(--color-bg-border);
    }

    .c-code-block__lang {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        text-transform: uppercase;
        font-weight: var(--font-weight-semibold);
    }

    .c-code-block__copy-btn {
        background: transparent;
        border: none;
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        transition: var(--transition-base);
    }

    .c-code-block__copy-btn:hover {
        color: var(--color-primary);
    }

    .c-code-block__pre {
        padding: var(--spacing-4);
        overflow-x: auto;
        margin: 0;
    }

    .c-code-block__code {
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.9em;
        background: transparent;
        border: none;
        padding: 0;
    }

    /* Search bar styles */
    .c-search-widget {
        position: relative;
    }

    .c-search-input {
        padding: var(--spacing-2) var(--spacing-4);
        border-radius: var(--radius-md);
        border: 1px solid var(--color-bg-border);
        background-color: var(--color-bg-base);
        color: var(--color-text-main);
        font-size: var(--font-size-sm);
        width: 220px;
        transition: var(--transition-base);
    }

    .c-search-input:focus {
        border-color: var(--color-primary);
        width: 280px;
    }

    .c-search-results {
        position: absolute;
        top: 100%;
        right: 0;
        width: 320px;
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        margin-top: var(--spacing-2);
        max-height: 400px;
        overflow-y: auto;
    }

    /* Equation Block */
    .c-equation {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-6);
        background-color: var(--color-bg-surface);
        border-left: 4px solid var(--color-primary);
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-8);
        font-family: 'STIX Two Math', 'Cambria Math', serif;
        font-size: var(--font-size-lg);
        overflow-x: auto;
    }

    /* Diagram Container */
    .c-diagram-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-8);
        border: 1px solid var(--color-bg-border);
        background-color: var(--color-bg-surface);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-8);
        min-height: 240px;
        position: relative;
    }

    /* Timeline Components */
    .c-timeline {
        position: relative;
        padding: var(--spacing-6) 0 var(--spacing-6) var(--spacing-8);
        margin-bottom: var(--spacing-8);
        list-style: none;
    }

    .c-timeline::before {
        content: '';
        position: absolute;
        left: var(--spacing-3);
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: var(--color-bg-border);
    }

    .c-timeline-item {
        position: relative;
        margin-bottom: var(--spacing-8);
    }

    .c-timeline-item:last-child {
        margin-bottom: 0;
    }

    .c-timeline-node {
        position: absolute;
        left: calc(var(--spacing-3) * -1 - 5px); /* Center node on line */
        top: var(--spacing-1);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--color-primary);
        border: 2px solid var(--color-bg-base);
    }

    .c-timeline-content {
        padding-left: var(--spacing-4);
    }

    .c-timeline-time {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
        margin-bottom: var(--spacing-1);
    }

    /* Figure with Caption Frame */
    .c-figure {
        display: block;
        margin-bottom: var(--spacing-8);
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        background-color: var(--color-bg-surface);
    }

    .c-figure-caption {
        padding: var(--spacing-3) var(--spacing-6);
        background-color: var(--color-bg-surface);
        border-top: 1px solid var(--color-bg-border);
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        text-align: center;
    }

    /* Variant: Definition Callout Box */
    .c-callout--definition {
        border-left-color: var(--color-primary);
        background-color: var(--color-bg-surface);
    }

    .c-definition-term {
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
    }

    /* Takeaways Box */
    .c-takeaways-box {
        border: 1px dashed var(--color-accent-primary);
        border-left: 6px solid var(--color-accent-primary);
        background-color: var(--color-primary-light);
        border-radius: var(--radius-md);
        padding: var(--spacing-6);
        margin-bottom: var(--spacing-8);
    }

    .c-takeaways-title {
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
        margin-bottom: var(--spacing-3);
        margin-top: 0;
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

    /* Tabs Component */
    .c-tabs {
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        margin-bottom: var(--spacing-8);
        background-color: var(--color-bg-base);
    }

    .c-tabs-nav {
        display: flex;
        background-color: var(--color-bg-surface);
        border-bottom: 1px solid var(--color-bg-border);
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    .c-tabs-btn {
        padding: var(--spacing-3) var(--spacing-6);
        background: transparent;
        border: none;
        font-weight: var(--font-weight-medium);
        color: var(--color-text-muted);
        border-bottom: 2px solid transparent;
        transition: var(--transition-base);
    }

    .c-tabs-btn:hover {
        color: var(--color-primary);
    }

    .c-tabs-btn.is-active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

    .c-tabs-panel {
        padding: var(--spacing-6);
    }

    .c-tabs-panel[hidden] {
        display: none !important;
    }

    /* Flashcard (3D Flip Animation) */
    .c-flashcard-deck {
        display: flex;
        justify-content: center;
        margin-bottom: var(--spacing-8);
    }

    .c-flashcard {
        width: 320px;
        height: 200px;
        perspective: 1000px;
        cursor: pointer;
    }

    .c-flashcard-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform var(--duration-slow) var(--easing-default);
        transform-style: preserve-3d;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
    }

    /* Flipped status trigger */
    .c-flashcard.is-flipped .c-flashcard-inner {
        transform: rotateY(180deg);
    }

    .c-flashcard-front, .c-flashcard-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-lg);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-6);
    }

    .c-flashcard-front {
        background-color: var(--color-bg-surface);
        color: var(--color-text-main);
    }

    .c-flashcard-back {
        background-color: var(--color-primary-light);
        color: var(--color-primary);
        transform: rotateY(180deg);
    }

    .c-flashcard-label {
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        color: var(--color-text-muted);
        letter-spacing: 0.05em;
        margin-bottom: var(--spacing-2);
    }

    .c-flashcard-prompt {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
    }

    /* Modals */
    .c-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: var(--z-modal);
        backdrop-filter: blur(2px);
    }

    .c-modal-overlay[hidden] {
        display: none !important;
    }

    .c-modal {
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-lg);
        width: 90%;
        max-width: 500px;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        animation: modal-slide var(--duration-normal) var(--easing-enter);
    }

    @keyframes modal-slide {
        from { transform: translateY(-30px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .c-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-4) var(--spacing-6);
        border-bottom: 1px solid var(--color-bg-border);
    }

    .c-modal-title {
        margin: 0;
        font-size: var(--font-size-lg);
    }

    .c-modal-body {
        padding: var(--spacing-6);
    }

    .c-modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: var(--spacing-3);
        padding: var(--spacing-4) var(--spacing-6);
        border-top: 1px solid var(--color-bg-border);
        background-color: var(--color-bg-surface);
    }

    /* Tooltip overlays */
    .c-tooltip {
        position: absolute;
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        padding: var(--spacing-3) var(--spacing-4);
        max-width: 280px;
        z-index: var(--z-dropdown);
        font-size: var(--font-size-sm);
        animation: tooltip-fade var(--duration-fast) var(--easing-enter);
    }

    @keyframes tooltip-fade {
        from { opacity: 0; transform: translateY(2px); }
        to { opacity: 1; transform: translateY(0); }
    }
}


@layer utilities {
    .u-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
}