/* ==========================================================================
   TexaX - SCIENCE & ENGINEERING VISUAL THEME ENGINE
   ==========================================================================
   
   This file transforms the entire TexaX interface when a student selects
   Science & Engineering and any of its sub-disciplines.
   
   Architecture:
     body[data-discipline="engineering"]                → General Eng theme
     body[data-subdiscipline="mech"]                    → Mechanical Engineering
     body[data-subdiscipline="cs"]                      → Computer Science & AI
     body[data-subdiscipline="elec"]                    → Electrical & Electronics
     body[data-subdiscipline="civil"]                   → Civil & Structural
     body[data-subdiscipline="chem"]                    → Chemical & Materials
     body[data-subdiscipline="phys_math"]               → Applied Mathematics & Physics
   
   Each sub-discipline applies:
     - Custom color palette & CSS variables
     - Background textures & patterns (CSS-generated, zero image dependencies)
     - Decorative SVG overlays injected via CSS pseudo-elements
     - Themed tool cards, borders, shadows, icons
     - Animated ambient elements (gears, waveforms, grids, molecules)
     - Custom scrollbar, selection color, and focus states
   ========================================================================== */


/* ==========================================================================
   1. GENERAL SCIENCE & ENGINEERING BASE LAYER
   Applied to ALL engineering sub-disciplines as a foundation
   ========================================================================== */

body[data-discipline="engineering"] {
    --eng-bg-primary: #f0f4f8;
    --eng-bg-secondary: #e2e8f0;
    --eng-surface: #ffffff;
    --eng-ink: #1e293b;
    --eng-ink-muted: #64748b;
    --eng-accent: #0284c7;
    --eng-accent-hover: #0369a1;
    --eng-accent-glow: rgba(2, 132, 199, 0.15);
    --eng-border: #cbd5e1;
    --eng-border-strong: #94a3b8;
    --eng-grid-line: rgba(148, 163, 184, 0.18);
    --eng-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --eng-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
    --eng-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.1);
    --eng-radius-sm: 8px;
    --eng-radius-md: 12px;
    --eng-radius-lg: 16px;
}

/* Engineering blueprint grid background */
body[data-discipline="engineering"] .main-content {
    background-color: var(--eng-bg-primary);
    background-image:
        linear-gradient(var(--eng-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--eng-grid-line) 1px, transparent 1px);
    background-size: 28px 28px;
    position: relative;
}

/* Subtle top gradient wash over grid */
body[data-discipline="engineering"] .main-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(240, 244, 248, 0.92) 0%,
        rgba(240, 244, 248, 0.4) 35%,
        rgba(240, 244, 248, 0.7) 100%);
    pointer-events: none;
    z-index: 0;
}

body[data-discipline="engineering"] .main-container {
    position: relative;
    z-index: 1;
}

/* Engineering navbar treatment */
body[data-discipline="engineering"] .navbar {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-bottom: 2px solid var(--eng-accent);
    box-shadow: 0 2px 12px rgba(2, 132, 199, 0.15);
}

body[data-discipline="engineering"] .brand-logo {
    letter-spacing: 0.08em;
}

/* Accent dot on discipline pill pulses in engineering cyan */
body[data-discipline="engineering"] .discipline-dot {
    background-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}

/* Engineering-styled tool cards */
body[data-discipline="engineering"] .tool-list-item {
    background: var(--eng-surface);
    border: 1px solid var(--eng-border);
    border-left: 3px solid var(--eng-accent);
    border-radius: var(--eng-radius-md);
    box-shadow: var(--eng-shadow-sm);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

body[data-discipline="engineering"] .tool-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background:
        radial-gradient(circle at center, transparent 18px, var(--eng-grid-line) 18px, var(--eng-grid-line) 19px, transparent 19px),
        radial-gradient(circle at center, transparent 10px, var(--eng-grid-line) 10px, var(--eng-grid-line) 11px, transparent 11px);
    opacity: 0.4;
    pointer-events: none;
}

body[data-discipline="engineering"] .tool-list-item:hover {
    border-color: var(--eng-accent);
    box-shadow: var(--eng-shadow-md), 0 0 0 3px var(--eng-accent-glow);
    transform: translateY(-2px);
}

/* Engineering section title */
body[data-discipline="engineering"] .section-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    position: relative;
    padding-left: 16px;
}

body[data-discipline="engineering"] .section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background: var(--eng-accent);
    border-radius: 2px;
}

/* Engineering bottom nav */
body[data-discipline="engineering"] .bottom-nav {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-top: 1px solid rgba(56, 189, 248, 0.2);
}

body[data-discipline="engineering"] .bottom-nav-link.active {
    color: #38bdf8;
}

/* Engineering scrollbar */
body[data-discipline="engineering"] ::-webkit-scrollbar {
    width: 7px;
}

body[data-discipline="engineering"] ::-webkit-scrollbar-track {
    background: var(--eng-bg-secondary);
}

body[data-discipline="engineering"] ::-webkit-scrollbar-thumb {
    background: var(--eng-border-strong);
    border-radius: 4px;
}

/* Engineering text selection */
body[data-discipline="engineering"] ::selection {
    background: rgba(2, 132, 199, 0.2);
    color: #0f172a;
}

/* Academic focus banner: engineering style */
body[data-discipline="engineering"] .academic-focus-banner {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-left: 4px solid #0284c7;
}


/* ==========================================================================
   2. MECHANICAL ENGINEERING SUB-THEME
   Wood workshop texture, steel rivets, gear decorations, industrial warmth
   ========================================================================== */

body[data-subdiscipline="mech"] {
    --mech-wood-light: #d4a574;
    --mech-wood-mid: #b8814a;
    --mech-wood-dark: #8b5e34;
    --mech-wood-grain: #7a5230;
    --mech-steel: #4a5568;
    --mech-steel-light: #a0aec0;
    --mech-rivet: #718096;
    --mech-accent: #c2410c;
    --mech-accent-warm: #ea580c;
    --mech-ink: #3c2415;
    --mech-surface: #faf5ef;
    --mech-amber-glow: rgba(234, 88, 12, 0.12);
}

/* Mechanical wood-grain workshop background */
body[data-subdiscipline="mech"] .main-content {
    background-color: #efe6d5;
    background-image:
        /* Horizontal wood grain lines */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 11px,
            rgba(139, 94, 52, 0.06) 11px,
            rgba(139, 94, 52, 0.06) 12px,
            transparent 12px,
            transparent 17px,
            rgba(139, 94, 52, 0.04) 17px,
            rgba(139, 94, 52, 0.04) 18px
        ),
        /* Vertical grain variation */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 45px,
            rgba(180, 130, 70, 0.03) 45px,
            rgba(180, 130, 70, 0.03) 46px
        ),
        /* Wood knot accent spots */
        radial-gradient(ellipse 80px 40px at 15% 25%, rgba(139, 94, 52, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 60px 30px at 72% 60%, rgba(139, 94, 52, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 90px 50px at 45% 85%, rgba(139, 94, 52, 0.04) 0%, transparent 70%),
        /* Base grain flow */
        linear-gradient(180deg, #f5ece0 0%, #efe6d5 30%, #e8dcc8 60%, #efe6d5 100%);
}

body[data-subdiscipline="mech"] .main-content::before {
    background: linear-gradient(180deg,
        rgba(239, 230, 213, 0.88) 0%,
        rgba(239, 230, 213, 0.25) 40%,
        rgba(239, 230, 213, 0.65) 100%);
}

/* Mechanical navbar: dark iron with rivet accents */
body[data-subdiscipline="mech"] .navbar {
    background: linear-gradient(180deg, #2d2018 0%, #3c2a1a 100%);
    border-bottom: 3px solid var(--mech-wood-mid);
    box-shadow:
        0 2px 8px rgba(60, 36, 21, 0.3),
        inset 0 -1px 0 rgba(212, 165, 116, 0.15);
    position: relative;
}

/* Steel rivet dots on navbar */
body[data-subdiscipline="mech"] .navbar::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 28px,
        rgba(160, 174, 192, 0.5) 28px,
        rgba(160, 174, 192, 0.5) 32px,
        transparent 32px
    );
}

body[data-subdiscipline="mech"] .brand-logo {
    color: var(--mech-wood-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body[data-subdiscipline="mech"] .discipline-dot {
    background-color: var(--mech-accent-warm);
    box-shadow: 0 0 8px rgba(234, 88, 12, 0.6);
}

body[data-subdiscipline="mech"] .discipline-status-pill {
    background: rgba(212, 165, 116, 0.12);
    border-color: rgba(212, 165, 116, 0.25);
}

/* Mechanical tool cards: wood panel with steel edging */
body[data-subdiscipline="mech"] .tool-list-item {
    background:
        linear-gradient(180deg, #faf5ef 0%, #f5ece0 100%);
    border: 1px solid rgba(184, 129, 74, 0.35);
    border-left: 4px solid var(--mech-wood-mid);
    border-radius: 6px;
    box-shadow:
        0 2px 6px rgba(60, 36, 21, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
}

/* Subtle wood grain on each tool card */
body[data-subdiscipline="mech"] .tool-list-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            rgba(139, 94, 52, 0.025) 8px,
            rgba(139, 94, 52, 0.025) 9px
        );
    pointer-events: none;
}

/* Steel corner rivet decoration on tool cards */
body[data-subdiscipline="mech"] .tool-list-item::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #cbd5e1 0%, #94a3b8 60%, #718096 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

body[data-subdiscipline="mech"] .tool-list-item:hover {
    border-color: var(--mech-accent);
    box-shadow:
        0 4px 14px rgba(194, 65, 12, 0.1),
        0 0 0 2px var(--mech-amber-glow);
    transform: translateY(-2px);
}

/* Tool icon boxes: brushed metal look */
body[data-subdiscipline="mech"] .tool-icon-box {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        inset 0 -1px 2px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Mechanical tool tags */
body[data-subdiscipline="mech"] .tool-tag {
    background: rgba(194, 65, 12, 0.1);
    color: var(--mech-accent);
    border: 1px solid rgba(194, 65, 12, 0.2);
}

/* Mechanical tool names: warm dark wood ink */
body[data-subdiscipline="mech"] .tool-name {
    color: var(--mech-ink);
    font-weight: 600;
}

body[data-subdiscipline="mech"] .tool-summary {
    color: #6b4c30;
}

/* Mechanical section title: stamped-in-wood look */
body[data-subdiscipline="mech"] .section-title {
    color: var(--mech-ink);
    font-weight: 700;
}

body[data-subdiscipline="mech"] .section-title::before {
    background: var(--mech-accent);
}

/* Academic focus banner: workshop notice board style */
body[data-subdiscipline="mech"] .academic-focus-banner {
    background:
        linear-gradient(180deg, #faf5ef 0%, #f0e6d4 100%);
    border: 1px solid rgba(184, 129, 74, 0.4);
    border-left: 4px solid var(--mech-accent);
    box-shadow:
        0 2px 8px rgba(60, 36, 21, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

body[data-subdiscipline="mech"] .focus-tagline {
    color: var(--mech-accent);
}

/* Mechanical bottom nav */
body[data-subdiscipline="mech"] .bottom-nav {
    background: linear-gradient(180deg, #2d2018 0%, #3c2a1a 100%);
    border-top: 2px solid var(--mech-wood-mid);
}

body[data-subdiscipline="mech"] .bottom-nav-link.active {
    color: var(--mech-wood-light);
}

/* Mechanical modal overlay tint */
body[data-subdiscipline="mech"] .modal-overlay.open {
    background: rgba(60, 36, 21, 0.6);
}

body[data-subdiscipline="mech"] .modal-card {
    border: 1px solid rgba(184, 129, 74, 0.3);
    box-shadow: 0 20px 50px rgba(60, 36, 21, 0.25);
}

body[data-subdiscipline="mech"] .modal-header {
    background: linear-gradient(180deg, #faf5ef 0%, #f5ece0 100%);
    border-bottom: 1px solid rgba(184, 129, 74, 0.25);
}

/* Mechanical selection color */
body[data-subdiscipline="mech"] ::selection {
    background: rgba(194, 65, 12, 0.18);
    color: #3c2415;
}

/* Mechanical scrollbar */
body[data-subdiscipline="mech"] ::-webkit-scrollbar-thumb {
    background: var(--mech-wood-mid);
    border-radius: 4px;
}

body[data-subdiscipline="mech"] ::-webkit-scrollbar-track {
    background: #efe6d5;
}

/* Mechanical drawer overlay */
body[data-subdiscipline="mech"] .nav-drawer {
    background: linear-gradient(180deg, #3c2a1a 0%, #2d2018 100%);
}

body[data-subdiscipline="mech"] .drawer-link {
    color: var(--mech-wood-light);
    border-bottom: 1px solid rgba(212, 165, 116, 0.15);
}

body[data-subdiscipline="mech"] .drawer-link:hover {
    color: #ffffff;
    background: rgba(212, 165, 116, 0.1);
}


/* ==========================================================================
   MECHANICAL: Animated Floating Gear SVG Decorations
   CSS-only gear shapes that rotate slowly in the background
   ========================================================================== */

body[data-subdiscipline="mech"] .tools-section::before,
body[data-subdiscipline="mech"] .tools-section::after {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
}

body[data-subdiscipline="mech"] .tools-section::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 15 L65 25 L75 20 L72 32 L85 32 L76 40 L86 48 L74 48 L75 60 L65 53 L60 63 L55 53 L45 60 L46 48 L34 48 L44 40 L35 32 L48 32 L45 20 L55 25 Z' fill='%238b5e34' /%3E%3Ccircle cx='60' cy='40' r='10' fill='none' stroke='%238b5e34' stroke-width='3'/%3E%3C/svg%3E");
    top: 80px;
    right: 30px;
    animation: gearSpinSlow 45s linear infinite;
}

body[data-subdiscipline="mech"] .tools-section::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 8 L44 16 L52 12 L50 22 L60 22 L53 28 L60 34 L50 34 L52 42 L44 38 L40 46 L36 38 L28 42 L30 34 L20 34 L27 28 L20 22 L30 22 L28 12 L36 16 Z' fill='%238b5e34' /%3E%3Ccircle cx='40' cy='27' r='7' fill='none' stroke='%238b5e34' stroke-width='2'/%3E%3C/svg%3E");
    bottom: 150px;
    left: 20px;
    animation: gearSpinReverse 55s linear infinite;
}

@keyframes gearSpinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes gearSpinReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Mech: onboarding overlay tint */
body[data-subdiscipline="mech"] .onboarding-overlay {
    background: rgba(45, 32, 24, 0.78);
}


/* ==========================================================================
   3. COMPUTER SCIENCE & COMPUTING — RETRO 1970s/1980s PUNCH CARD & MAINFRAME
   Vintage IBM 5081 Hollerith 80-column punch cards, manila cardstock, 
   monochrome beige plastic bezels, reel-to-reel magnetic tape hubs, 
   dot-matrix tractor feed perforations, mechanical toggle switches.
   ZERO modern hacker neon/matrix cliché. Genuine vintage computing apparatus.
   ========================================================================== */

body[data-subdiscipline="cs"] {
    --cs-manila: #ede4d1;
    --cs-manila-dark: #dfd4be;
    --cs-manila-border: #b8a98f;
    --cs-ibm-blue: #0b3d91;
    --cs-ibm-ink: #2b261f;
    --cs-tape-black: #1a1a1a;
    --cs-bezel-beige: #d8cdb8;
    --cs-punch-hole: #231f18;
    --cs-accent-red: #b91c1c;
    --cs-font: 'JetBrains Mono', 'Courier New', monospace;
}

/* Background: 80-Column IBM Punch Card Sheet with tractor feed holes */
body[data-subdiscipline="cs"] .main-content {
    background-color: #f4ece1;
    background-image:
        /* Vertical 80-column punch card grid rules */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            rgba(184, 169, 143, 0.22) 19px,
            rgba(184, 169, 143, 0.22) 20px
        ),
        /* Horizontal row registration lines (0 to 9 numeric rows) */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 27px,
            rgba(184, 169, 143, 0.28) 27px,
            rgba(184, 169, 143, 0.28) 28px
        ),
        /* Tractor-feed sprocket holes down left and right gutters */
        radial-gradient(circle 5px at 14px 28px, #dfd4be 4px, #a89a80 5px, transparent 6px),
        radial-gradient(circle 5px at calc(100% - 14px) 28px, #dfd4be 4px, #a89a80 5px, transparent 6px);
    background-size: 100% 100%, 100% 100%, 100% 56px, 100% 56px;
    font-family: var(--cs-font);
}

body[data-subdiscipline="cs"] .main-content::before {
    background: linear-gradient(180deg,
        rgba(244, 236, 225, 0.94) 0%,
        rgba(244, 236, 225, 0.25) 30%,
        rgba(244, 236, 225, 0.75) 100%);
}

/* Navbar: Heavy IBM 7090 Mainframe beige steel casing with control panel strip */
body[data-subdiscipline="cs"] .navbar {
    background: linear-gradient(180deg, #3d352e 0%, #29241f 100%);
    border-bottom: 4px solid var(--cs-bezel-beige);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    position: relative;
}

/* Mainframe incandescent indicator jewel lights on navbar */
body[data-subdiscipline="cs"] .navbar::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 24px;
    right: 24px;
    height: 6px;
    background-image: repeating-linear-gradient(
        90deg,
        #b91c1c 0px, #b91c1c 8px,
        transparent 8px, transparent 18px,
        #d97706 18px, #d97706 26px,
        transparent 26px, transparent 36px,
        #15803d 36px, #15803d 44px,
        transparent 44px, transparent 54px
    );
    border-radius: 2px;
}

body[data-subdiscipline="cs"] .brand-logo {
    color: #ede4d1;
    font-family: var(--cs-font);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-shadow: 1px 1px 0px #000;
}

body[data-subdiscipline="cs"] .brand-logo::before {
    content: 'IBM-PUNCH// ';
    color: #a89a80;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: -4px;
}

body[data-subdiscipline="cs"] .discipline-dot {
    background-color: #d97706;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.8);
    border-radius: 0;
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
}

body[data-subdiscipline="cs"] .discipline-status-pill {
    background: #473e35;
    border: 1px solid #786b5c;
    color: #ede4d1;
    font-family: var(--cs-font);
    border-radius: 4px;
}

/* Tool Cards: Physical Hollerith Punch Cards with cut-corner and rectangular punch slots */
body[data-subdiscipline="cs"] .tool-list-item {
    background: var(--cs-manila);
    border: 2px solid var(--cs-manila-border);
    border-top: 3px solid var(--cs-ibm-blue);
    /* Classic top-left corner bevel cut of 80-col punch card */
    clip-path: polygon(14px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 14px);
    box-shadow: 
        3px 3px 0px rgba(184, 169, 143, 0.8),
        5px 5px 8px rgba(43, 38, 31, 0.12);
    border-radius: 0;
    position: relative;
    padding: 16px 20px;
}

/* Physical punch-card rectangular holes stamped across card top */
body[data-subdiscipline="cs"] .tool-list-item::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 28px;
    width: 60px;
    height: 8px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--cs-punch-hole) 0px, var(--cs-punch-hole) 4px,
        transparent 4px, transparent 10px
    );
    box-shadow: inset 1px 1px 1px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.4);
    pointer-events: none;
}

body[data-subdiscipline="cs"] .tool-list-item:hover {
    background: #f7efe4;
    border-color: var(--cs-ibm-blue);
    transform: translate(-2px, -2px);
    box-shadow: 
        5px 5px 0px var(--cs-manila-border),
        8px 8px 14px rgba(43, 38, 31, 0.2);
}

body[data-subdiscipline="cs"] .tool-icon-box {
    background: #dfd4be;
    border: 1px solid #b8a98f;
    border-radius: 3px;
    color: var(--cs-ibm-blue);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.15);
}

body[data-subdiscipline="cs"] .tool-name {
    color: var(--cs-ibm-ink);
    font-family: var(--cs-font);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

body[data-subdiscipline="cs"] .tool-summary {
    color: #5c5244;
    font-family: var(--cs-font);
    font-size: 0.8rem;
}

body[data-subdiscipline="cs"] .tool-tag {
    background: #dfd4be;
    color: var(--cs-ibm-blue);
    border: 1px solid #b8a98f;
    border-radius: 2px;
    font-family: var(--cs-font);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Reel-to-Reel Tape Drive SVGs floating in background */
body[data-subdiscipline="cs"] .tools-section::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='62' fill='none' stroke='%23b8a98f' stroke-width='4'/%3E%3Ccircle cx='70' cy='70' r='24' fill='%23dfd4be' stroke='%23b8a98f' stroke-width='3'/%3E%3Ccircle cx='70' cy='70' r='10' fill='%232b261f'/%3E%3Ccircle cx='70' cy='32' r='8' fill='%23dfd4be' stroke='%23b8a98f' stroke-width='2'/%3E%3Ccircle cx='37' cy='89' r='8' fill='%23dfd4be' stroke='%23b8a98f' stroke-width='2'/%3E%3Ccircle cx='103' cy='89' r='8' fill='%23dfd4be' stroke='%23b8a98f' stroke-width='2'/%3E%3C/svg%3E");
    position: absolute;
    top: 40px;
    right: 40px;
    opacity: 0.14;
    animation: tapeSpin 20s linear infinite;
    pointer-events: none;
}

body[data-subdiscipline="cs"] .tools-section::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='62' fill='none' stroke='%23b8a98f' stroke-width='4'/%3E%3Ccircle cx='70' cy='70' r='24' fill='%23dfd4be' stroke='%23b8a98f' stroke-width='3'/%3E%3Ccircle cx='70' cy='70' r='10' fill='%232b261f'/%3E%3Ccircle cx='70' cy='32' r='8' fill='%23dfd4be' stroke='%23b8a98f' stroke-width='2'/%3E%3Ccircle cx='37' cy='89' r='8' fill='%23dfd4be' stroke='%23b8a98f' stroke-width='2'/%3E%3Ccircle cx='103' cy='89' r='8' fill='%23dfd4be' stroke='%23b8a98f' stroke-width='2'/%3E%3C/svg%3E");
    position: absolute;
    top: 40px;
    right: 195px;
    opacity: 0.14;
    animation: tapeSpin 18s linear infinite;
    pointer-events: none;
}

@keyframes tapeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

body[data-subdiscipline="cs"] .academic-focus-banner {
    background: var(--cs-manila);
    border: 2px solid var(--cs-manila-border);
    border-left: 6px solid var(--cs-ibm-blue);
    clip-path: polygon(14px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 14px);
    box-shadow: 3px 3px 0px rgba(184, 169, 143, 0.7);
}

body[data-subdiscipline="cs"] .bottom-nav {
    background: #29241f;
    border-top: 3px solid var(--cs-bezel-beige);
}

body[data-subdiscipline="cs"] .bottom-nav-link.active {
    color: var(--cs-manila);
}

body[data-subdiscipline="cs"] .nav-drawer {
    background: #29241f;
}


/* ==========================================================================
   4. ELECTRICAL & ELECTRONICS — PHYSICAL SOLDER-BREADBOARD & JUMPER WIRE RIG
   Literal woven DuPont jumper wires running across card edges (red, blue,
   yellow, green braided insulated wires), brass solder eyelet pads at every
   corner, phenolic FR-4 copper clad resin board with screen-printed white
   component silkscreen reference labels (R1, C3, U2, GND, +5V, OSC).
   ========================================================================== */

body[data-subdiscipline="elec"] {
    --elec-fr4-green: #1a3c28;
    --elec-fr4-deep: #0f2719;
    --elec-copper-trace: #cf8a3c;
    --elec-solder-tin: #d1d5db;
    --elec-silkscreen: #ffffff;
    --elec-wire-red: #dc2626;
    --elec-wire-blue: #2563eb;
    --elec-wire-yellow: #ca8a04;
    --elec-wire-green: #16a34a;
}

/* Background: Genuine FR-4 Phenolic Glass-Epoxy Printed Circuit Board */
body[data-subdiscipline="elec"] .main-content {
    background-color: var(--elec-fr4-deep);
    background-image:
        /* FR-4 woven fiberglass substrate matrix texture */
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 2px,
            transparent 2px, transparent 6px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 2px,
            transparent 2px, transparent 6px
        ),
        /* Interconnecting 45-degree angle copper bus traces */
        linear-gradient(45deg, transparent 48%, rgba(207, 138, 60, 0.12) 48%, rgba(207, 138, 60, 0.12) 52%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(207, 138, 60, 0.12) 48%, rgba(207, 138, 60, 0.12) 52%, transparent 52%),
        /* Solder eyelet donut ring pads on 30px grid */
        radial-gradient(circle 3.5px at 15px 15px, #0f2719 1.5px, #cf8a3c 2.5px, #d1d5db 3.5px, transparent 4.5px);
    background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px, 30px 30px;
}

body[data-subdiscipline="elec"] .main-content::before {
    background: linear-gradient(180deg,
        rgba(15, 39, 25, 0.88) 0%,
        rgba(15, 39, 25, 0.15) 35%,
        rgba(15, 39, 25, 0.8) 100%);
}

/* Navbar: Heavy Bakelite & Anodized Steel Chassis with Earth Ground Terminal */
body[data-subdiscipline="elec"] .navbar {
    background: linear-gradient(180deg, #18221c 0%, #0d1611 100%);
    border-bottom: 3px solid var(--elec-copper-trace);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    position: relative;
}

/* Twisted pair copper bus wiring strip across navbar edge */
body[data-subdiscipline="elec"] .navbar::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        #dc2626 0px, #dc2626 12px,
        #1e1e1e 12px, #1e1e1e 15px,
        #2563eb 15px, #2563eb 27px,
        #1e1e1e 27px, #1e1e1e 30px,
        #ca8a04 30px, #ca8a04 42px
    );
}

body[data-subdiscipline="elec"] .brand-logo {
    color: #fef08a;
    font-family: monospace;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
}

body[data-subdiscipline="elec"] .discipline-dot {
    background-color: #22c55e;
    box-shadow: 0 0 10px #22c55e, 0 0 20px #22c55e;
}

/* Tool Cards: Solder Breadboard Modules with Jumper Wires & Donut Eyelets */
body[data-subdiscipline="elec"] .tool-list-item {
    background: linear-gradient(145deg, #1b452e 0%, #123020 100%);
    border: 2px solid #285e3f;
    border-radius: 4px;
    position: relative;
    padding: 18px 22px;
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    overflow: visible;
}

/* Physical Solder Lug Eyelet Pads at all 4 corners of each card */
body[data-subdiscipline="elec"] .tool-list-item::before {
    content: '';
    position: absolute;
    inset: 4px;
    background:
        radial-gradient(circle 3px at 4px 4px, #0f2719 1px, #d1d5db 2.5px, #cf8a3c 3.5px, transparent 4px),
        radial-gradient(circle 3px at calc(100% - 4px) 4px, #0f2719 1px, #d1d5db 2.5px, #cf8a3c 3.5px, transparent 4px),
        radial-gradient(circle 3px at 4px calc(100% - 4px), #0f2719 1px, #d1d5db 2.5px, #cf8a3c 3.5px, transparent 4px),
        radial-gradient(circle 3px at calc(100% - 4px) calc(100% - 4px), #0f2719 1px, #d1d5db 2.5px, #cf8a3c 3.5px, transparent 4px);
    pointer-events: none;
}

/* Curved DuPont Insulated Jumper Wire hanging from top-left of the card! */
body[data-subdiscipline="elec"] .tool-list-item::after {
    content: '';
    position: absolute;
    top: -9px;
    left: 20px;
    width: 65px;
    height: 18px;
    border: 3.5px solid var(--elec-wire-red);
    border-bottom: none;
    border-radius: 30px 30px 0 0;
    box-shadow: 0 3px 5px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* Alternate jumper wire colors across tools */
body[data-subdiscipline="elec"] .tool-list-item:nth-child(2n)::after {
    border-color: var(--elec-wire-blue);
    left: 45px;
    width: 50px;
}
body[data-subdiscipline="elec"] .tool-list-item:nth-child(3n)::after {
    border-color: var(--elec-wire-yellow);
    left: 30px;
    width: 75px;
}
body[data-subdiscipline="elec"] .tool-list-item:nth-child(4n)::after {
    border-color: var(--elec-wire-green);
    left: 60px;
    width: 45px;
}

body[data-subdiscipline="elec"] .tool-list-item:hover {
    border-color: var(--elec-copper-trace);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.6),
        0 0 12px rgba(207, 138, 60, 0.35);
    transform: translateY(-2px);
}

body[data-subdiscipline="elec"] .tool-icon-box {
    background: #0f2719;
    border: 1.5px solid var(--elec-copper-trace);
    color: #fef08a;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
    border-radius: 4px;
}

body[data-subdiscipline="elec"] .tool-name {
    color: #f3f4f6;
    font-family: monospace;
    font-weight: 700;
}

body[data-subdiscipline="elec"] .tool-name::before {
    content: 'J1-';
    color: var(--elec-copper-trace);
    font-size: 0.72rem;
    margin-right: 4px;
}

body[data-subdiscipline="elec"] .tool-summary {
    color: #9ca3af;
    font-family: monospace;
    font-size: 0.8rem;
}

body[data-subdiscipline="elec"] .tool-tag {
    background: #0f2719;
    color: var(--elec-copper-trace);
    border: 1px solid var(--elec-copper-trace);
    border-radius: 2px;
    font-family: monospace;
    font-weight: 700;
}

body[data-subdiscipline="elec"] .section-title {
    color: #fef08a;
    font-family: monospace;
    letter-spacing: 0.04em;
}

body[data-subdiscipline="elec"] .section-title::before {
    background: var(--elec-copper-trace);
    box-shadow: 0 0 10px rgba(207, 138, 60, 0.7);
}

body[data-subdiscipline="elec"] .academic-focus-banner {
    background: linear-gradient(145deg, #1b452e 0%, #123020 100%);
    border: 2px solid #285e3f;
    border-left: 6px solid var(--elec-copper-trace);
}

body[data-subdiscipline="elec"] .bottom-nav {
    background: #0d1611;
    border-top: 3px solid var(--elec-copper-trace);
}


/* ==========================================================================
   5. CIVIL & STRUCTURAL — CYANOTYPE BLUEPRINT & RIVETED I-BEAM GIRDER
   Classic Prussian Blue cyanotype ammonia drafting paper, white-ink drafting
   lines, rusted iron steel I-beam gusset plates with heavy hex bolts, 
   yellow/black diagonal safety tape hazard edging.
   ========================================================================== */

body[data-subdiscipline="civil"] {
    --civil-blueprint: #0d3b66;
    --civil-blueprint-deep: #06223e;
    --civil-iron-rust: #78350f;
    --civil-draft-white: #ffffff;
    --civil-survey-yellow: #facc15;
    --civil-hazard-black: #171717;
}

/* Background: Real Chemical Cyanotype Blueprint drafting paper with ammonia wash */
body[data-subdiscipline="civil"] .main-content {
    background-color: var(--civil-blueprint-deep);
    background-image:
        /* Fine 1/8" imperial drafting grid */
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        /* Major 1" structural grid */
        linear-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px),
        /* Diagonal cross-bracing truss guidelines */
        linear-gradient(45deg, transparent 49.5%, rgba(255, 255, 255, 0.05) 49.5%, rgba(255, 255, 255, 0.05) 50.5%, transparent 50.5%);
    background-size: 15px 15px, 15px 15px, 75px 75px, 75px 75px, 150px 150px;
}

body[data-subdiscipline="civil"] .main-content::before {
    background: linear-gradient(180deg,
        rgba(6, 34, 62, 0.85) 0%,
        rgba(6, 34, 62, 0.2) 40%,
        rgba(6, 34, 62, 0.75) 100%);
}

/* Navbar: Heavy I-Beam Steel Girder with Diagonal Yellow/Black Hazard Stripes */
body[data-subdiscipline="civil"] .navbar {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-bottom: 5px solid var(--civil-survey-yellow);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    position: relative;
}

/* OSHA Hazard Warning Diagonal Striping across entire navbar base */
body[data-subdiscipline="civil"] .navbar::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 5px;
    background: repeating-linear-gradient(
        -45deg,
        #facc15 0px, #facc15 14px,
        #171717 14px, #171717 28px
    );
}

body[data-subdiscipline="civil"] .brand-logo {
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body[data-subdiscipline="civil"] .brand-logo::after {
    content: ' [SPEC-A36]';
    color: var(--civil-survey-yellow);
    font-size: 0.65rem;
    font-weight: 600;
}

body[data-subdiscipline="civil"] .discipline-dot {
    background-color: var(--civil-survey-yellow);
    box-shadow: 0 0 10px #facc15;
    border-radius: 0;
}

/* Tool Cards: Riveted Structural Steel Gusset Plate with 4 Heavy Hex-Bolts */
body[data-subdiscipline="civil"] .tool-list-item {
    background: linear-gradient(145deg, #11385d 0%, #0b2540 100%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-left: 5px solid var(--civil-survey-yellow);
    border-radius: 2px;
    position: relative;
    padding: 18px 22px;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 4 Hexagonal High-Strength Structural Bolts clamped in card corners */
body[data-subdiscipline="civil"] .tool-list-item::before {
    content: '';
    position: absolute;
    inset: 4px;
    background:
        /* Hex bolt top-left */
        radial-gradient(circle 4px at 6px 6px, #94a3b8 2px, #334155 3.5px, transparent 4px),
        /* Hex bolt top-right */
        radial-gradient(circle 4px at calc(100% - 6px) 6px, #94a3b8 2px, #334155 3.5px, transparent 4px),
        /* Hex bolt bottom-left */
        radial-gradient(circle 4px at 6px calc(100% - 6px), #94a3b8 2px, #334155 3.5px, transparent 4px),
        /* Hex bolt bottom-right */
        radial-gradient(circle 4px at calc(100% - 6px) calc(100% - 6px), #94a3b8 2px, #334155 3.5px, transparent 4px);
    pointer-events: none;
}

body[data-subdiscipline="civil"] .tool-list-item:hover {
    border-color: var(--civil-survey-yellow);
    background: linear-gradient(145deg, #174572 0%, #0e3052 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.65),
        0 0 12px rgba(250, 204, 21, 0.3);
}

body[data-subdiscipline="civil"] .tool-icon-box {
    background: rgba(250, 204, 21, 0.12);
    border: 1.5px solid var(--civil-survey-yellow);
    color: var(--civil-survey-yellow);
    border-radius: 2px;
}

body[data-subdiscipline="civil"] .tool-name {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.01em;
}

body[data-subdiscipline="civil"] .tool-summary {
    color: #cbd5e1;
    font-size: 0.82rem;
}

body[data-subdiscipline="civil"] .tool-tag {
    background: rgba(250, 204, 21, 0.15);
    color: var(--civil-survey-yellow);
    border: 1px solid var(--civil-survey-yellow);
    border-radius: 1px;
    font-weight: 700;
}

body[data-subdiscipline="civil"] .section-title {
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-subdiscipline="civil"] .section-title::before {
    background: var(--civil-survey-yellow);
}

body[data-subdiscipline="civil"] .academic-focus-banner {
    background: linear-gradient(145deg, #11385d 0%, #0b2540 100%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-left: 6px solid var(--civil-survey-yellow);
}

body[data-subdiscipline="civil"] .bottom-nav {
    background: #0f172a;
    border-top: 3px solid var(--civil-survey-yellow);
}


/* ==========================================================================
   6. CHEMICAL & MATERIALS — 19th CENTURY ALCHEMICAL APOTHECARY & LAB GLASS
   Weathered aged parchment paper, dark amber glassware bottles, cork stoppers,
   copper condenser coiling tubes, embossed gold leaf foil stamps, 
   faint periodic table element squares in background.
   ========================================================================== */

body[data-subdiscipline="chem"] {
    --chem-amber-glass: #78350f;
    --chem-amber-bright: #d97706;
    --chem-gold-foil: #b45309;
    --chem-parchment: #f7f1e5;
    --chem-parchment-border: #d4c5a9;
    --chem-ink: #291c10;
}

/* Background: Aged hand-pressed parchment with chemical formula watermark */
body[data-subdiscipline="chem"] .main-content {
    background-color: #f3ece0;
    background-image:
        /* Aged paper texture specks */
        radial-gradient(circle 1px at 30% 20%, rgba(120, 53, 15, 0.04) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 70% 60%, rgba(120, 53, 15, 0.05) 0%, transparent 100%),
        /* Hexagonal benzene ring lattice pattern */
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 34px,
            rgba(180, 83, 9, 0.04) 34px,
            rgba(180, 83, 9, 0.04) 35px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent,
            transparent 34px,
            rgba(180, 83, 9, 0.04) 34px,
            rgba(180, 83, 9, 0.04) 35px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 39px,
            rgba(180, 83, 9, 0.04) 39px,
            rgba(180, 83, 9, 0.04) 40px
        );
}

body[data-subdiscipline="chem"] .main-content::before {
    background: linear-gradient(180deg,
        rgba(243, 236, 224, 0.92) 0%,
        rgba(243, 236, 224, 0.25) 35%,
        rgba(243, 236, 224, 0.8) 100%);
}

/* Navbar: Deep Amber Glass Bottle with Gold-Leaf Foil Inscription */
body[data-subdiscipline="chem"] .navbar {
    background: linear-gradient(180deg, #3d1a08 0%, #260e03 100%);
    border-bottom: 3px solid var(--chem-amber-bright);
    box-shadow: 0 4px 12px rgba(61, 26, 8, 0.45);
}

body[data-subdiscipline="chem"] .brand-logo {
    color: #fef3c7;
    font-family: Georgia, serif;
    font-style: italic;
    letter-spacing: 0.08em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

body[data-subdiscipline="chem"] .discipline-dot {
    background-color: var(--chem-amber-bright);
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.8);
}

/* Tool Cards: Apothecary Specimen Labels with Embossed Ornamental Gold Borders */
body[data-subdiscipline="chem"] .tool-list-item {
    background: var(--chem-parchment);
    border: 2px solid var(--chem-parchment-border);
    border-left: 5px solid var(--chem-amber-glass);
    border-radius: 4px;
    position: relative;
    padding: 18px 22px;
    box-shadow: 
        2px 2px 0px rgba(120, 53, 15, 0.15),
        4px 4px 10px rgba(41, 28, 16, 0.08);
}

/* Embossed gold corner filigree flourishes on apothecary label */
body[data-subdiscipline="chem"] .tool-list-item::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--chem-gold-foil);
    border-right: 2px solid var(--chem-gold-foil);
    pointer-events: none;
}
body[data-subdiscipline="chem"] .tool-list-item::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    border-bottom: 2px solid var(--chem-gold-foil);
    border-right: 2px solid var(--chem-gold-foil);
    pointer-events: none;
}

body[data-subdiscipline="chem"] .tool-list-item:hover {
    background: #fffbf2;
    border-color: var(--chem-amber-bright);
    transform: translateY(-2px);
    box-shadow: 
        0 6px 16px rgba(120, 53, 15, 0.18),
        0 0 0 2px rgba(217, 119, 6, 0.15);
}

body[data-subdiscipline="chem"] .tool-icon-box {
    background: #eddcc6;
    border: 1px solid var(--chem-gold-foil);
    color: var(--chem-amber-glass);
    border-radius: 50%;
}

body[data-subdiscipline="chem"] .tool-name {
    color: var(--chem-ink);
    font-family: Georgia, serif;
    font-weight: 700;
}

body[data-subdiscipline="chem"] .tool-summary {
    color: #5c432d;
    font-family: Georgia, serif;
    font-size: 0.85rem;
}

body[data-subdiscipline="chem"] .tool-tag {
    background: #eddcc6;
    color: var(--chem-amber-glass);
    border: 1px solid var(--chem-gold-foil);
    font-family: Georgia, serif;
    font-style: italic;
}

body[data-subdiscipline="chem"] .section-title {
    color: var(--chem-ink);
    font-family: Georgia, serif;
}

body[data-subdiscipline="chem"] .academic-focus-banner {
    background: var(--chem-parchment);
    border: 2px solid var(--chem-parchment-border);
    border-left: 6px solid var(--chem-amber-glass);
}

body[data-subdiscipline="chem"] .bottom-nav {
    background: #260e03;
    border-top: 3px solid var(--chem-amber-bright);
}


/* ==========================================================================
   7. APPLIED MATHEMATICS & PHYSICS — 1960s BAMBOO SLIDE RULE & BRASS CALIPERS
   Authentic celluloid ivory scales with engraved hairline cursor runners,
   bamboo core grain, red logarithmic gauge graduations (C, D, A, B, LL scales),
   precision vernier division markings, heavy brass weight plates.
   ========================================================================== */

body[data-subdiscipline="phys_math"] {
    --pm-celluloid: #fbf8ee;
    --pm-celluloid-dark: #eee8d5;
    --pm-bamboo-strip: #c29b62;
    --pm-gauge-red: #b91c1c;
    --pm-hairline-black: #111827;
    --pm-cursor-glass: rgba(186, 230, 253, 0.25);
}

/* Background: Engraved ivory logarithmic slide rule scales with division tics */
body[data-subdiscipline="phys_math"] .main-content {
    background-color: #f7f3e8;
    background-image:
        /* Primary logarithmic tick graduations (major ticks every 50px, minor ticks every 10px) */
        repeating-linear-gradient(
            90deg,
            var(--pm-hairline-black) 0px, var(--pm-hairline-black) 1px,
            transparent 1px, transparent 10px
        ),
        repeating-linear-gradient(
            90deg,
            var(--pm-gauge-red) 0px, var(--pm-gauge-red) 1.5px,
            transparent 1.5px, transparent 50px
        ),
        /* Horizontal bamboo core boundary runners */
        linear-gradient(0deg, rgba(194, 155, 98, 0.12) 2px, transparent 2px),
        linear-gradient(90deg, rgba(194, 155, 98, 0.12) 2px, transparent 2px);
    background-size: 100% 12px, 100% 22px, 30px 30px, 30px 30px;
}

body[data-subdiscipline="phys_math"] .main-content::before {
    background: linear-gradient(180deg,
        rgba(247, 243, 232, 0.94) 0%,
        rgba(247, 243, 232, 0.2) 30%,
        rgba(247, 243, 232, 0.8) 100%);
}

/* Navbar: Polished Rosewood & Brass End Plates of a Pickett / Keuffel & Esser Slide Rule */
body[data-subdiscipline="phys_math"] .navbar {
    background: linear-gradient(180deg, #2b1f15 0%, #17100b 100%);
    border-bottom: 4px solid var(--pm-bamboo-strip);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Brass caliper measurement ticks across bottom of navbar */
body[data-subdiscipline="phys_math"] .navbar::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background-image: repeating-linear-gradient(
        90deg,
        #fef08a 0px, #fef08a 2px,
        transparent 2px, transparent 8px,
        #b91c1c 8px, #b91c1c 10px,
        transparent 10px, transparent 16px
    );
}

body[data-subdiscipline="phys_math"] .brand-logo {
    color: #fbf8ee;
    font-family: 'Times New Roman', serif;
    font-style: italic;
    letter-spacing: 0.1em;
}

body[data-subdiscipline="phys_math"] .brand-logo::after {
    content: ' [K&E-LOG]';
    color: var(--pm-gauge-red);
    font-size: 0.65rem;
    font-style: normal;
}

body[data-subdiscipline="phys_math"] .discipline-dot {
    background-color: var(--pm-gauge-red);
    box-shadow: 0 0 8px rgba(185, 28, 28, 0.7);
}

/* Tool Cards: Slide Rule Runner Slider with Red Center Hairline Cursor Indicator */
body[data-subdiscipline="phys_math"] .tool-list-item {
    background: var(--pm-celluloid);
    border: 2px solid #d4cca9;
    border-left: 6px solid var(--pm-bamboo-strip);
    border-radius: 3px;
    position: relative;
    padding: 18px 22px;
    box-shadow: 
        0 2px 6px rgba(43, 31, 21, 0.1),
        inset 0 1px 0 rgba(255,255,255,0.8);
}

/* Engraved millimeter ruler graduations along the top edge of each tool card */
body[data-subdiscipline="phys_math"] .tool-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 7px;
    background-image: repeating-linear-gradient(
        90deg,
        #111827 0px, #111827 1px,
        transparent 1px, transparent 5px,
        #b91c1c 5px, #b91c1c 6px,
        transparent 6px, transparent 10px
    );
    opacity: 0.75;
    pointer-events: none;
}

/* Red Hairline Indicator Line stamped vertically across center of card on hover! */
body[data-subdiscipline="phys_math"] .tool-list-item::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1.5px;
    background: var(--pm-gauge-red);
    opacity: 0.25;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

body[data-subdiscipline="phys_math"] .tool-list-item:hover::after {
    opacity: 0.85;
    box-shadow: 0 0 4px rgba(185, 28, 28, 0.5);
}

body[data-subdiscipline="phys_math"] .tool-list-item:hover {
    background: #ffffff;
    border-color: var(--pm-gauge-red);
    transform: translateY(-2px);
    box-shadow: 
        0 6px 18px rgba(43, 31, 21, 0.15),
        0 0 0 2px rgba(185, 28, 28, 0.12);
}

body[data-subdiscipline="phys_math"] .tool-icon-box {
    background: #eee8d5;
    border: 1px solid var(--pm-bamboo-strip);
    color: var(--pm-gauge-red);
    border-radius: 2px;
}

body[data-subdiscipline="phys_math"] .tool-name {
    color: var(--pm-hairline-black);
    font-family: 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.05rem;
}

body[data-subdiscipline="phys_math"] .tool-summary {
    color: #4b5563;
    font-size: 0.82rem;
}

body[data-subdiscipline="phys_math"] .tool-tag {
    background: #eee8d5;
    color: var(--pm-gauge-red);
    border: 1px solid #d4cca9;
    font-family: monospace;
    font-weight: 700;
}

body[data-subdiscipline="phys_math"] .section-title {
    color: var(--pm-hairline-black);
    font-family: 'Times New Roman', serif;
    font-weight: 700;
}

body[data-subdiscipline="phys_math"] .section-title::before {
    background: var(--pm-gauge-red);
}

body[data-subdiscipline="phys_math"] .academic-focus-banner {
    background: var(--pm-celluloid);
    border: 2px solid #d4cca9;
    border-left: 6px solid var(--pm-bamboo-strip);
}

body[data-subdiscipline="phys_math"] .bottom-nav {
    background: #17100b;
    border-top: 3px solid var(--pm-bamboo-strip);
}