/* ============================
   CALLSHEET — LAYOUT OVERRIDE
   ============================ */

.container { max-width: 900px; }

/* ============================
   HEADER
   ============================ */

.project-header { padding-top: 8rem; padding-bottom: 4rem; border-bottom: 1px solid var(--steel-border); transition: border-color 0.5s ease; }
.back-link { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; transition: color 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; }
.back-link:hover { color: var(--accent-orange); }
.project-name { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: 0.05em; margin-bottom: 1rem; }
.project-subtitle { font-size: 0.95rem; color: var(--text-secondary); font-weight: 300; line-height: 1.7; max-width: 640px; }
.project-meta-row { display: flex; gap: 0.75rem; margin-top: 2rem; flex-wrap: wrap; }
.project-meta-tag { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); padding: 0.4rem 0.8rem; border: 1px solid var(--steel-border); border-radius: 2px; }
.project-meta-tag.active { color: var(--accent-orange); border-color: var(--accent-orange-dim); }

/* ============================
   SECTIONS
   ============================ */

.content-section { padding: 4rem 0; }
.content-section + .content-section { border-top: 1px solid var(--steel-border); }
.content-section .section-header { margin-bottom: 2rem; }

/* ============================
   STATS
   ============================ */

.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--steel-border); border: 1px solid var(--steel-border);
    border-radius: 2px; overflow: hidden; margin: 2.5rem 0;
}
.stat-item { padding: 1.25rem; background: var(--bg-card); text-align: center; transition: background 0.5s ease; }
.stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--accent-orange); margin-bottom: 0.3rem; }
.stat-label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }

.stats-grid-wide {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
    background: var(--steel-border); border: 1px solid var(--steel-border);
    border-radius: 2px; overflow: hidden; margin: 2rem 0;
}

/* ============================
   DOMAIN GRID
   ============================ */

.domain-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--steel-border); border: 1px solid var(--steel-border);
    border-radius: 2px; overflow: hidden; margin: 2.5rem 0;
}
.domain-card { padding: 1.5rem; background: var(--bg-card); transition: background 0.5s ease; }
.domain-card:hover { background: var(--bg-card-hover); }
.domain-name { font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.5rem; }
.domain-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; font-weight: 300; }
.domain-stats { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.5rem; letter-spacing: 0.05em; }

/* ============================
   ARCH DIAGRAM
   ============================ */

.arch-diagram {
    margin: 2.5rem 0; padding: 2rem; border: 1px solid var(--steel-border);
    border-radius: 2px; background: var(--bg-card); overflow-x: auto;
    transition: background 0.5s ease, border-color 0.5s ease;
}
.arch-diagram svg { width: 100%; min-width: 700px; height: auto; display: block; }

/* ============================
   FLOW STEPS
   ============================ */

.flow-container { margin: 2.5rem 0; }
.flow-step { display: grid; grid-template-columns: 40px 1fr; gap: 1.5rem; padding: 1rem 0; }
.flow-marker { display: flex; flex-direction: column; align-items: center; }
.flow-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--accent-orange); background: var(--bg-primary); position: relative; z-index: 1; transition: background 0.5s ease; }
.flow-dot.filled { background: var(--accent-orange); }
.flow-line { width: 1px; flex: 1; background: var(--steel-border); margin-top: 4px; }
.flow-content-title { font-size: 0.85rem; font-weight: 500; margin-bottom: 0.3rem; }
.flow-content-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; font-weight: 300; }

/* ============================
   CODE BLOCK
   ============================ */

.code-block {
    margin: 2rem 0; padding: 1.5rem; background: var(--code-bg);
    border: 1px solid var(--code-border); border-radius: 2px;
    font-size: 0.8rem; line-height: 1.8; color: var(--text-secondary);
    overflow-x: auto; white-space: pre;
}
.code-block .kw { color: var(--accent-orange); }
.code-block .cm { color: var(--text-dim); }
.code-block .str { color: #7ec8a0; }
[data-theme="light"] .code-block .str { color: #2e7d52; }
.code-block .num { color: #d4a0ff; }
[data-theme="light"] .code-block .num { color: #7b3fbf; }

/* ============================
   GRADUATION TABLE
   ============================ */

.grad-table {
    width: 100%; margin: 2rem 0; border-collapse: collapse;
    font-size: 0.85rem;
}
.grad-table th {
    text-align: left; padding: 0.75rem 1rem; font-size: 0.65rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
    border-bottom: 1px solid var(--steel-border); font-weight: 500;
}
.grad-table td {
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--steel-border);
    color: var(--text-secondary); font-weight: 300; line-height: 1.5;
    vertical-align: top;
}
.grad-table td:first-child { color: var(--text-primary); font-weight: 400; }

/* ============================
   TECH STACK
   ============================ */

.stack-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--steel-border); border: 1px solid var(--steel-border);
    border-radius: 2px; overflow: hidden; margin: 2rem 0;
}
.stack-item { padding: 1rem 1.25rem; background: var(--bg-card); display: flex; justify-content: space-between; align-items: center; transition: background 0.5s ease; }
.stack-layer { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.stack-tech { font-size: 0.85rem; color: var(--text-primary); font-weight: 400; text-align: right; }

/* ============================
   FLOATING TOC RAIL
   ============================ */

.toc-rail {
    position: fixed;
    left: max(1rem, calc((100vw - 900px) / 2 - 60px));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 90;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.toc-rail.visible {
    opacity: 1;
    pointer-events: auto;
}
.toc-item {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 2px;
    transition: background 0.3s ease;
    overflow: hidden;
}
.toc-item:hover {
    background: var(--bg-card);
}
.toc-index {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    transition: color 0.3s ease;
    white-space: nowrap;
    min-width: 24px;
}
.toc-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.3s ease, opacity 0.3s ease, color 0.3s ease;
    margin-left: 0;
}
.toc-item:hover .toc-label {
    max-width: 100px;
    opacity: 1;
    margin-left: 6px;
}
.toc-item.active .toc-index { color: var(--accent-orange); }
.toc-item.active .toc-label { color: var(--accent-orange); }

/* Active bar */
.toc-item::before {
    content: '';
    width: 2px;
    height: 100%;
    min-height: 16px;
    background: transparent;
    margin-right: 6px;
    border-radius: 1px;
    transition: background 0.3s ease;
    flex-shrink: 0;
}
.toc-item.active::before {
    background: var(--accent-orange);
}

@media (max-width: 1100px) {
    .toc-rail { display: none; }
}

/* ============================
   RESPONSIVE — CALLSHEET
   ============================ */

@media (max-width: 768px) {
    .domain-grid, .stack-grid { grid-template-columns: 1fr; }
    .stats-grid, .stats-grid-wide { grid-template-columns: 1fr 1fr; }
    .project-meta-row { gap: 0.5rem; }
    .grad-table { font-size: 0.75rem; }
    .grad-table th, .grad-table td { padding: 0.5rem; }
}