/*This file plays as a index for the rest of the scripts*/

/* style.css */
@import url('base.css');
@import url('layout.css');
@import url('cards.css');
@import url('elements.css');
@import url('tags.css');
@import url('nav.css');
@import url('projects.css');
@import url('project_window.css');
@import url('floating_preview.css');
@import url('citation_highlights.css');
@import url('gallery_photos.css');
@import url('contact.css');




/* Project detail pages — pre-loaded for print, invisible on screen */
#print-projects-section {
    display: none;
}

/* Canvas overview snapshot — built lazily on beforeprint, invisible on screen */
#print-overview-wrap {
    display: none;
}

/* Vision card's source list as a standalone print page — invisible on screen */
#print-vision-sources-page {
    display: none;
}

/* style.css */

@media print {
    @page {
        size: A4;
        margin: 1.5cm;
    }

    /* Force colour printing — without this, browsers strip background colours */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* === 1. HIDE CHROME & INTERACTIVE ELEMENTS === */
    .ui-layer,
    #lines-layer,
    #project-sidebar,
    #piv-mouse-tooltip,
    .node,
    .lit-button,
    .hub-nav-arrows,
    .archive-header,
    canvas:not(#canvas) {
        display: none !important;
    }

    /* === 2. PAGE BACKGROUND — subtle dot grid echoing the canvas === */
    html, body {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background-color: #f7f7f7 !important;
        background-image: radial-gradient(#cecece 1px, transparent 1px) !important;
        background-size: 22px 22px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* === 3. HIDE THE LIVE INTERACTIVE CANVAS ===
       The live #viewport (pan/zoom canvas) is replaced for print by a
       static snapshot built on beforeprint (see #print-overview-wrap
       below) — printing the live canvas itself would mean fighting its
       pixel-coordinate, transform-driven layout for no benefit, since the
       snapshot already reproduces it faithfully. */
    #viewport {
        display: none !important;
    }

    /* === 3b. CANVAS OVERVIEW — a single page showing the mindmap exactly
       as it looks on screen (native card layout + connector lines), so a
       reader can see the spatial flow between cards before the linear
       Activity pages that follow. #print-overview-wrap's width/height and
       the `overview` @page size are written in by buildPrintOverview() in
       project_scanner.js, since @page size can't read CSS variables. */
    #print-overview-wrap {
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        background-color: #f7f7f7 !important;
        background-image: radial-gradient(#cecece 1px, transparent 1px) !important;
        background-size: 22px 22px !important;
    }

    #print-overview-canvas {
        transform: none !important;
    }

    /* The connector-line clone keeps its original id="lines-layer", which
       rule #1 above hides everywhere else on the page. Scope an override so
       the overview's lines (the whole point of this page — showing the flow
       between cards) actually render. Two ID selectors out-specifies the
       single-ID hide rule even though both use !important. */
    #print-overview-wrap #lines-layer {
        display: block !important;
    }

    /* .node dots are hidden everywhere else in print, and .line-caption
       pills are hidden outright below — but inside the overview both are
       exactly what shows the flow between sections, so re-enable them
       here. Their positions are already baked into inline styles in the
       same canvas-native coordinate space as everything else (computed by
       lines.js before the clone was taken), so they line up correctly
       without any extra repositioning. The extra #print-overview-wrap ID
       out-specifies the blanket hide rules below regardless of order. */
    #print-overview-wrap .node {
        display: block !important;
    }

    #print-overview-wrap .line-caption {
        display: inline-flex !important;
    }

    /* Outside the overview, caption pills are a screen-only navigation aid
       driven by live JS positioning — meaningless anywhere else. */
    .line-caption {
        display: none !important;
    }

    /* .process-box's gradient border is drawn with mask-composite:exclude,
       which Chromium's print engine doesn't honour — instead of punching
       out the centre to leave a thin ring, the full-opacity ::before paints
       as a solid block on top of the box, hiding the paragraph text and
       tags underneath and showing the wrong (much more saturated) colour
       than the site. Drop it for print and fall back to a plain border. */
    .process-box::before {
        display: none !important;
    }

    .process-box {
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
    }

    /* The Vision card's source list (#vision-citations-popup) is a
       click-to-open popup positioned with JS — meaningless in a static PDF.
       buildPrintVisionSources() builds this as its own page, completely
       outside the canvas overview's absolutely-positioned, canvas-native
       coordinate system — embedding it inside the Vision card itself (tried
       twice) always pushed the card's edge into a connector-line caption or
       neighbouring card no matter which direction it grew, since those
       neighbours' positions are baked into inline styles by lines.js before
       the overview clone is taken and can't react to the card resizing. */
    #print-vision-sources-page {
        display: block !important;
        break-before: page !important;
        page-break-before: always !important;
        padding: 40px 0 !important;
    }

    .print-vision-sources-heading {
        font-size: 22px !important;
        font-weight: 700 !important;
        margin: 0 0 24px 0 !important;
        color: #1a1a1a !important;
    }

    #print-vision-sources-page .vision-citations-list {
        max-width: 600px !important;
    }

    #print-vision-sources-page .vision-citations-list li {
        font-size: 13px !important;
    }

    /* === 13. PROJECT DETAIL PAGES === */
    #print-projects-section {
        display: block !important;
    }

    /* Generic safety net so any inline content image stays within the page
       width — the hero/visual-tile images below have their own sizing. */
    #print-projects-section img {
        max-width: 100% !important;
        height: auto !important;
    }

    .print-project-entry {
        break-before: page !important;
        page-break-before: always !important;
    }

    /* Each project page wrapped in a styled card */
    .print-project-entry .project-page-container {
        width: 100% !important;
        max-width: 100% !important;
        background: white !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        border: 1px solid #eee !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07) !important;
        padding-bottom: 20px !important;
    }

    .print-project-entry .hero-media {
        height: auto !important;
        aspect-ratio: auto !important;
        max-height: 260px !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    .print-project-entry .hero-media img {
        width: 100% !important;
        max-height: 260px !important;
        object-fit: cover !important;
    }

    .print-project-entry .project-mosaic-organized {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .print-project-entry .visual-tile,
    .print-project-entry .visual-tile.thin {
        grid-column: span 1 !important;
        height: auto !important;
        overflow: hidden !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        border-radius: 12px !important;
    }

    .print-project-entry .visual-inner {
        height: auto !important;
        padding-top: 0 !important;
    }

    .print-project-entry .visual-inner img {
        width: 100% !important;
        max-height: 240px !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* Restore the purple reflection box inside project pages */
    .print-project-entry .reflection-box {
        background: #e2e4ff !important;
        border: 1px solid #c8cdff !important;
        border-radius: 16px !important;
    }

    /* Restore the info box */
    .print-project-entry .piv-info-box {
        background: #fcfcfc !important;
        border: 1px solid #eee !important;
        border-radius: 12px !important;
    }

    /* Video / PDF placeholder */
    .print-video-placeholder {
        border: 1px solid #bbb !important;
        border-radius: 8px !important;
        padding: 12px 18px !important;
        background: #f0f0f0 !important;
        margin: 12px 0 !important;
        font-size: 13px !important;
        color: #444 !important;
        break-inside: avoid !important;
    }

    .print-project-entry .visual-pill,
    .print-project-entry .pdf-download-btn {
        display: none !important;
    }
}