/* =========================================
   AI LAB — Mobile Styles (based on template)
   ========================================= */

/* 1. RESET & VARIABLES (Synced with template) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#0a0a0a;--bg2:#111;--bg3:#161616;--border:#2a2a2a;--border2:#333;
    --text:#e8e6e0;--muted:#666;--muted2:#444;
    --accent:#00ff88;--accent2:#00cc6a;--accent-dim:rgba(0,255,136,0.08);--accent-dim2:rgba(0,255,136,0.15);
    --warn:#ff9500;--info:#4488ff;--danger:#ff4455;--planned:#555;
    --mono:'IBM Plex Mono',monospace;--sans:'IBM Plex Sans',sans-serif;
    --nav-w:260px;--nav-h:50px;
    --mobile-nav-h: 60px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.7;min-height:100vh;display:flex}

/* 2. NAVIGATION (Desktop Default) */
nav{position:fixed;top:0;left:0;width:var(--nav-w);height:100vh;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;z-index:100}
.nav-header{padding:2rem 1.5rem 1.5rem;border-bottom:1px solid var(--border)}
.nav-logo{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--accent);text-transform:uppercase;margin-bottom:.35rem}
.nav-title{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--text);line-height:1.3}
.nav-sub{font-size:11px;color:var(--muted);margin-top:.3rem;font-family:var(--mono)}
.nav-phases{padding:1.25rem 0;flex:1;overflow-y:auto}
.nav-section{padding:.25rem 1.5rem .1rem;font-size:10px;letter-spacing:.12em;color:var(--muted2);text-transform:uppercase;font-family:var(--mono);margin-top:.75rem}
.nav-item{display:flex;align-items:stretch;text-decoration:none;padding:.1rem 0;margin:.1rem 0}
.nav-item:hover .nav-item-inner{background:var(--accent-dim);border-left-color:var(--accent)}
.nav-item.active .nav-item-inner{background:var(--accent-dim2);border-left-color:var(--accent)}
.nav-item-inner{display:flex;align-items:center;gap:10px;padding:.55rem 1rem .55rem 1.5rem;width:100%;border-left:2px solid transparent;transition:all .15s}
.nav-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-done{background:var(--accent)}.dot-active{background:var(--warn);box-shadow:0 0 6px var(--warn)}.dot-planned{background:#44aacc;box-shadow:0 0 6px #44aacc}.dot-completed{background:#4488ff;box-shadow:0 0 6px #4488ff}
.nav-phase-label,.nav-label{font-family:var(--mono);font-size:11px;color:var(--muted);flex-shrink:0}
.nav-phase-name,.nav-name{font-size:12px;color:var(--text);line-height:1.3}
.nav-item.active .nav-phase-name,.nav-item.active .nav-name{color:var(--accent)}.nav-item.active .nav-phase-label,.nav-item.active .nav-label{color:var(--accent2)}
.nav-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);font-size:10px;color:var(--muted);font-family:var(--mono)}

/* 3. LANG TOGGLE (Inside nav-header) */
.lang-toggle{display:flex;gap:4px;margin-top:.75rem}
.lang-btn{background:transparent;border:1px solid var(--border2);color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:3px 8px;cursor:pointer;transition:all .15s}
.lang-btn.active,.lang-btn:hover{border-color:var(--accent);color:var(--accent)}

/* 4. MAIN & PAGES */
main{margin-left:var(--nav-w);flex:1;min-height:100vh}
.page{display:none;min-height:100vh;animation:fadein .3s ease}
.page.active{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* 5. PAGE HEADER */
.page-header{padding:3.5rem 3rem 2.5rem;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.page-header::before{content:'';position:absolute;top:-60px;right:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--accent-dim2) 0%,transparent 70%);pointer-events:none}
.phase-badge,.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:1rem}
.phase-status,.badge-dot{display:inline-block;padding:2px 8px;font-size:10px;font-family:var(--mono);letter-spacing:.08em;border-radius:2px}
.status-done,.b-done{background:rgba(0,255,136,.12);color:var(--accent);border:1px solid rgba(0,255,136,.3)}
.status-active,.b-active{background:rgba(255,149,0,.1);color:var(--warn);border:1px solid rgba(255,149,0,.3)}
.status-planned,.b-plan{background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--border2)}
.status-completed,.b-completed{background:rgba(68,136,255,.1);color:var(--info);border:1px solid rgba(68,136,255,.3)}
.page-title,.ptitle{font-family:var(--mono);font-size:2rem;font-weight:600;color:var(--text);line-height:1.2;margin-bottom:.5rem}
.page-date,.pdate{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* 6. CONTENT & TYPOGRAPHY */
.page-content,.pcontent{padding:2.5rem 3rem 4rem;max-width:860px}
.section-heading,.sh{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin:2.5rem 0 1rem;display:flex;align-items:center;gap:10px}
.section-heading::after,.sh::after{content:'';flex:1;height:1px;background:var(--border)}
p{color:#c8c6c0;line-height:1.8;margin-bottom:1rem}
.lead{font-size:16px;color:var(--text);line-height:1.8;margin-bottom:1.5rem}

/* 7. CARDS & GRIDS */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px;margin-bottom:1.5rem}
.card{background:var(--bg3);border:1px solid var(--border);padding:1.25rem;border-radius:3px}
.card-label,.cl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:.4rem}
.card-value,.cv{font-family:var(--mono);font-size:1.4rem;font-weight:600;color:var(--accent)}
.card-sub,.cs{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:.2rem}

/* Project Specific Cards */
.proj-grid{display:grid;grid-template-columns:1fr;gap:16px}
.proj-card{background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:1.5rem 1.75rem;position:relative;transition:border-color .2s,box-shadow .2s}
.proj-card:hover{border-color:var(--accent); box-shadow:0 0 20px var(--accent-dim)}
.proj-num{position:absolute;top:1.5rem;right:1.75rem;font-family:var(--mono);font-size:24px;font-weight:600;color:var(--accent-dim2)}
.proj-title{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--text);margin-bottom:.5rem}
.proj-desc{font-size:13px;color:#c8c6c0;line-height:1.6;margin-bottom:.75rem}
.proj-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:1rem}
.tag{font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:2px;display:inline-block;margin-right:4px;margin-bottom:4px}
.tag-green,.tg{background:rgba(0,255,136,.1);color:var(--accent);border:1px solid rgba(0,255,136,.25)}
.tag-gray,.tg2,.cl2{background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--border2)}
.tag-blue,.tb{background:rgba(68,136,255,.1);color:var(--info);border:1px solid rgba(68,136,255,.25)}

/* CTA BUTTON */
.cta{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--accent);text-decoration:none;padding:6px 14px;border:1px solid rgba(0,255,136,.3);border-radius:2px;background:rgba(0,255,136,.06);transition:all .15s}
.cta:hover{background:rgba(0,255,136,.12);border-color:var(--accent);box-shadow:0 0 12px var(--accent-dim)}
.cta .arrow{transition:transform .15s}
.cta:hover .arrow{transform:translateX(3px)}

/* TABLES */
.st,.spec-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px;margin-bottom:1.5rem}
.st tr,.spec-table tr{border-bottom:1px solid var(--border)}.st tr:last-child,.spec-table tr:last-child{border-bottom:none}
.st td,.spec-table td{padding:.6rem .5rem}.st td:first-child,.spec-table td:first-child{color:var(--muted);width:180px;padding-right:1rem}
.st td:last-child{color:var(--text)}
.sv,.spec-val{color:var(--accent)!important}
.ct{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px;margin-bottom:1.5rem}
.ct thead th{text-align:left;padding:.6rem .5rem;color:var(--muted);border-bottom:1px solid var(--border);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.ct thead th:first-child{width:140px}
.ct tbody td{padding:.6rem .5rem;border-bottom:1px solid var(--border)}
.ct tbody tr:last-child td{border-bottom:none}
.cw{color:var(--accent)}

/* PIPELINE */
.pipeline{position:relative;padding-left:2rem;margin:1.5rem 0}
.pipeline::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--border)}
.ps{position:relative;padding:1rem 0 1rem 1.5rem}
.ps::before{content:'';position:absolute;left:-1.35rem;top:1.15rem;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
.ps.planned::before{background:transparent;border:2px solid var(--muted2)}
.pt2{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--text);margin-bottom:.25rem}
.pd{font-size:13px;color:#c8c6c0;line-height:1.6}
.ptag{display:inline-block;font-family:var(--mono);font-size:10px;padding:1px 6px;border-radius:2px;margin-top:.3rem}
.ptag.d{background:rgba(0,255,136,.1);color:var(--accent);border:1px solid rgba(0,255,136,.25)}
.ptag.p{background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--border2)}

/* CALLOUTS */
.callout{background:var(--accent-dim);border:1px solid rgba(0,255,136,.2);border-left:3px solid var(--accent);padding:1rem 1.25rem;margin:1.5rem 0;border-radius:0 3px 3px 0;font-size:14px;color:#c8c6c0}
.callout.w,.callout.warn{background:rgba(255,149,0,.06);border-color:rgba(255,149,0,.2);border-left-color:var(--warn)}
.callout.i,.callout.info{background:rgba(68,136,255,.06);border-color:rgba(68,136,255,.2);border-left-color:var(--info)}
.callout.planned{background:rgba(255,255,255,.02);border-color:var(--border2);border-left-color:var(--muted2)}

/* BENCHMARKS / METRICS */
.bw{background:var(--bg3);border:1px solid var(--border);padding:1.5rem;margin:1rem 0;border-radius:3px}
.bt{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.br{display:flex;align-items:center;gap:10px;margin-bottom:.6rem;font-family:var(--mono);font-size:12px}
.bl{width:130px;color:var(--muted);flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt2{flex:1;height:14px;background:rgba(255,255,255,.04);border-radius:1px;position:relative;overflow:hidden}
.bf{height:100%;border-radius:1px;position:absolute;top:0;left:0}
.ba{background:var(--accent);opacity:.85}
.bv{width:60px;text-align:right;color:var(--text);flex-shrink:0}
.mr{display:flex;align-items:center;gap:12px;padding:.6rem 0;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:13px}
.mr:last-child{border-bottom:none}
.mn{color:var(--muted);flex:1}.mb{color:var(--muted);min-width:70px;text-align:right}
.ma2{color:var(--border2)}.mf{color:var(--text);min-width:70px;text-align:right}
.md{min-width:60px;text-align:right;font-size:12px}
.dp{color:var(--accent)}.dn{color:var(--danger)}

/* Metric rows — full class names used in rig-project HTML */
.metric-row{display:flex;align-items:center;gap:12px;padding:.6rem 0;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:13px}
.metric-row:last-child{border-bottom:none}
.metric-name{color:var(--muted);flex:1}
.metric-before{color:var(--muted);min-width:70px;text-align:right}
.metric-arrow{color:var(--border2)}
.metric-after{color:var(--text);min-width:70px;text-align:right}
.metric-delta{min-width:60px;text-align:right;font-size:12px}
.delta-pos{color:var(--accent)}
.delta-neg{color:var(--danger)}

/* BAR CHARTS (Benchmark visual bars) */
.bench-wrap{background:var(--bg3);border:1px solid var(--border);padding:1.5rem;margin:1rem 0;border-radius:3px}
.bench-title{font-family:var(--mono);font-size:11px;color:var(--text);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:.5rem;font-family:var(--mono);font-size:12px}
.bar-row:last-child{margin-bottom:0}
.bar-label{width:140px;color:var(--muted);flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.bar-track{flex:1;height:16px;background:rgba(255,255,255,.04);border-radius:2px;position:relative;overflow:hidden}
.bar-fill{height:100%;border-radius:2px;position:absolute;top:0;left:0}
.bar-before{background:rgba(255,255,255,.12)}
.bar-after{background:var(--accent);opacity:.85}
.bar-val{width:55px;text-align:right;color:var(--text);flex-shrink:0;font-size:12px}

/* PHASE COMPARISON TABLE */
.phase-table{font-family:var(--mono);font-size:12px}
.phase-table-head{display:grid;grid-template-columns:1fr 1fr 1fr 1fr .6fr;gap:4px;padding:6px 0;border-bottom:1px solid var(--border);margin-bottom:4px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.phase-table-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr .6fr;gap:4px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);align-items:center}
.phase-table-row:last-child{border-bottom:none}
.pt-model{color:var(--text);font-size:11px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-val{text-align:center;font-size:12px;color:var(--text)}
.pt-val.ph1{border-left:2px solid #555}
.pt-val.ph2{border-left:2px solid #3266ad}
.pt-val.ph3{border-left:2px solid #00cc6a}
.pt-empty{color:var(--muted) !important;opacity:.35 !important}
.pt-delta{text-align:center;font-size:10px;font-weight:600}
.pt-pos{color:var(--accent)}
.pt-neu{color:var(--muted)}
.pt-new{color:var(--warn);font-size:9px;text-transform:uppercase}
.pt-warn{opacity:.7}

/* CROSS-PHASE COMPARISON TABLE */
.cross-bench-table{font-family:var(--mono);font-size:13px;width:100%}
.cb-header,.cb-row{display:grid;grid-template-columns:minmax(140px,2.5fr) 1fr 1fr 1fr 1.2fr;gap:4px;align-items:center}
.cb-header{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:6px 0;border-bottom:1px solid var(--border);margin-bottom:4px}
.cb-row{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.cb-row:last-child{border-bottom:none}
.cb-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-model{color:var(--text);font-size:13px;text-align:left}
.cb-phase-cell{text-align:center}
.cb-delta-cell{text-align:center}
.cb-val{font-size:14px;color:var(--text);display:block;text-align:center}
.cb-val.ph1{border-left:2px solid #555;padding-left:6px}
.cb-val.ph2{border-left:2px solid #3266ad;padding-left:6px}
.cb-val.ph3{border-left:2px solid var(--accent2);padding-left:6px}
.cb-val.ph3-gold{border-left:2px solid var(--warn);padding-left:6px}
.cb-accent{color:var(--accent) !important}
.cb-gold{color:var(--warn) !important}
.cb-na{color:var(--muted2) !important;opacity:.4 !important}
.cb-delta{font-size:13px;font-weight:600}
.cb-pos{color:var(--accent)}
.cb-pos-warn{color:var(--warn)}

/* TIMELINE */
.timeline{position:relative;padding-left:1.5rem}
.timeline::before{content:'';position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--border2)}
.tl-item{position:relative;margin-bottom:1.5rem}
.tl-dot{position:absolute;left:-1.5rem;top:5px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
.tl-date{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:.2rem}
.tl-text{color:#c8c6c0;font-size:14px;line-height:1.6}

/* i18n */
[data-lang]:not(.visible){display:none !important}
[data-lang].visible{display:revert}
span[data-lang].visible{display:inline}
span.legend-item.visible{display:inline-flex}

/* UTILITIES */
.table-wrapper{overflow-x:auto;width:100%}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:1fr 1fr 1fr;}
.grid-4{grid-template-columns:1fr 1fr 1fr 1fr;}

/* MOBILE OVERRIDES (Bottom Nav Layout) */
@media (max-width: 900px) {
    :root { --nav-w: 100%; }
    
    nav {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--mobile-nav-h) !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 !important;
        border-right: none !important;
        border-top: 1px solid var(--border) !important;
        border-bottom: none !important;
        z-index: 1000 !important;
    }

    /* Hide desktop-only nav elements */
    .nav-footer, .nav-section, .nav-dot, .nav-phase-label, .nav-sub, .nav-title, .nav-logo {
        display: none !important;
    }

    /* Collapse nav-header on mobile (lang-toggle is position: fixed, so it stays visible) */
    .nav-header {
        height: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }

    /* Show lang-toggle on mobile — make it fixed at top-right */
    .lang-toggle {
        display: flex !important;
        position: fixed !important;
        top: 12px !important;
        right: 14px !important;
        z-index: 1001 !important;
        margin: 0 !important;
    }

    .nav-phases {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        justify-content: space-around !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .nav-item {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-item-inner {
        flex-direction: column !important;
        gap: 2px !important;
        padding: 4px 0 !important;
        width: 100% !important;
        border-left: none !important;
        border-bottom: 3px solid transparent !important;
        height: 100% !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .nav-item.active .nav-item-inner {
        background: transparent !important;
        border-bottom-color: var(--accent) !important;
    }

    .nav-phase-name, .nav-name {
        display: block !important;
        font-size: 10px !important;
        text-align: center !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    main {
        margin-left: 0 !important;
        margin-bottom: var(--mobile-nav-h) !important;
    }

    .page-header {
        padding: 2.5rem 1.5rem 2rem !important;
    }

    .page-content, .pcontent {
        padding: 1.5rem 1.5rem 4rem !important;
    }

    .page-title, .ptitle {
        font-size: 1.75rem !important;
    }

    .cards, .proj-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Mobile overrides for metric rows */
    .metric-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 12px !important;
    }
    .metric-name {
        flex: 1 1 100% !important;
        margin-bottom: 2px !important;
    }
    .metric-before, .metric-after {
        min-width: auto !important;
    }

    /* Mobile overrides for bar charts */
    .bar-label {
        width: 100px !important;
        font-size: 11px !important;
    }
    .bar-track {
        height: 14px !important;
    }
    .bar-val {
        width: 45px !important;
        font-size: 11px !important;
    }
}