/* 1. GLOBAL VIEWPORT & CANVAS ANCHOR */
#canvas-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Prevents scrollbars from breaking the camera snap */
    position: relative;
    background: #0b0e14; /* Deep neutral for high-contrast focus */
}

#canvas {
    position: absolute;
    width: 8000px; /* Massive workspace ensures Tier 3+ never clips */
    height: 8000px;
    top: 0;
    left: 0;
    /* CRITICAL: transform-origin must be 0 0 for the script centering math to work */
    transform-origin: 0 0; 
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

/* 2. UNIVERSAL NODE ARCHITECTURE */
.node {
    position: absolute;
    min-width: 170px;
    max-width: 280px;
    min-height: 52px;
    padding: 12px 20px;
    border-radius: 14px;
    background: #161B22;
    color: #ffffff;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 600;
    text-align: center;
    border: 1px solid #30363D;
    /* Smooth scaling and glow for student selection feedback */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* 3. THE COLOR SCRIPT: Generational Inquiry Path */

/* Tier 0: The Central Inquiry Core */
#root {
    background: #ffffff !important;
    color: #0b0e14 !important;
    font-size: 1.3rem;
    font-weight: 800;
    border: 3px solid #58A6FF;
    z-index: 100;
}

/* Tier 1: The 5 Power Pillars (Blue) */
.node.tier-1 {
    border: 4px solid #58A6FF;
    color: #58A6FF;
    background: rgba(88, 166, 255, 0.1);
    font-size: 1.1rem;
}

/* Tier 2: Contextual Information Branches (Green) */
.node.tier-2 {
    border: 3px solid #3FB950;
    color: #3FB950;
    background: rgba(63, 185, 80, 0.1);
    font-size: 1rem;
}

/* Tier 3: Evidence, Proof & Research (Purple) */
.node.tier-3 {
    border: 2.5px dashed #D2A8FF;
    color: #D2A8FF;
    background: rgba(210, 168, 255, 0.05);
    font-size: 0.95rem;
}

/* 4. SELECTION FEEDBACK (The Sticky Focus) */
.node.selected {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
    box-shadow: 0 0 30px #58A6FF;
    transform: scale(1.1);
    z-index: 1000 !important;
}

/* 5. CONNECTOR LINES (SVG Mind Map Paths) */
line {
    stroke-linecap: round;
    pointer-events: none; /* Lines won't block student clicks */
}

/* Line thickness decreases as inquiry deepens */
.line-tier-1 { stroke: #58A6FF; stroke-width: 5; opacity: 0.5; }
.line-tier-2 { stroke: #3FB950; stroke-width: 3; opacity: 0.4; }
.line-tier-3 { stroke: #D2A8FF; stroke-width: 2; stroke-dasharray: 6,4; opacity: 0.4; }

/* 6. ACCESSIBILITY: Large Inputs for Arthritis & Visual Clarity */
.lab-textarea, .evidence-input {
    background: #0d1117 !important;
    color: #ffffff !important;
    border: 1px solid #30363D;
    padding: 15px;
    border-radius: 10px;
    font-size: 16px;
    width: 100%;
}