/**
 * Document Codex Page Styles
 * Deep Self - Document Self Protocol
 * 
 * Page-specific styles for the document-codex.html page
 */

.container {
    max-width: var(--max-width);
    margin: 0;
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-lg) var(--left-offset);
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--white); }

/* ===== PASSWORD GATE ===== */
.access-gate {
    background: var(--charcoal);
    border: 1px solid var(--grey-dark);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

.access-gate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--purple), var(--blue), var(--purple));
}

.access-gate.unlocked {
    border-color: var(--green);
}

.access-gate.unlocked::before {
    background: var(--green);
}

.access-label {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--purple);
    font-family: var(--font-family);
    margin-bottom: var(--spacing-xs);
}

.access-gate.unlocked .access-label {
    color: var(--green);
}

.access-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cream);
    margin-bottom: var(--spacing-sm);
}

.access-form {
    display: flex;
    gap: var(--spacing-xs);
    align-items: flex-start;
}

.access-input {
    flex: 1;
    background: var(--black);
    border: 1px solid var(--grey-dark);
    color: var(--cream);
    font-family: var(--font-family);
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    outline: none;
    transition: border-color var(--transition-medium), box-shadow var(--transition-medium);
}

.access-input:focus {
    border-color: var(--purple);
}

.access-input::placeholder {
    color: var(--grey);
}

.access-btn {
    background: transparent;
    border: 1px solid var(--purple);
    color: var(--purple);
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background var(--transition-medium), border-color var(--transition-medium), color var(--transition-medium), box-shadow var(--transition-medium);
}

.access-btn:hover {
    background: var(--purple);
    color: var(--black);
}

.access-error {
    color: var(--red);
    font-size: 0.75rem;
    margin-top: var(--spacing-xs);
    display: none;
}

.access-success {
    display: none;
    color: var(--green);
    font-size: 0.875rem;
    padding: var(--spacing-sm);
    text-align: left;
}

.access-gate.unlocked .access-form { display: none; }
.access-gate.unlocked .access-success { display: block; }

/* ===== HEADER ===== */
.page-header {
    text-align: left;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--grey-dark);
}

.page-badge {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--purple);
    border: 1px solid rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.08);
    padding: 0.35rem 0.75rem;
    margin-bottom: var(--spacing-md);
    font-family: var(--font-family);
}

.page-title {
    font-family: var(--font-family);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 300;
    color: var(--white);
    margin-bottom: var(--spacing-sm);
}

.page-subtitle {
    font-size: 1.125rem;
    color: var(--cream);
    opacity: 0.8;
    font-style: normal;
}

.page-tag {
    font-size: 0.75rem;
    color: var(--grey);
    margin-top: var(--spacing-xs);
}

/* ===== REDACTION EFFECTS (DECLASSIFIED) ===== */
.redact-bar {
    background: transparent;
    color: var(--green);
}

.redact-blur, .redact-blur-heavy, .redact-pixel {
    filter: none;
    opacity: 1;
}

.redact-strike {
    text-decoration: none;
    opacity: 1;
}

.redact-glass::before {
    display: none;
}

.redact-glass-content {
    filter: none;
    opacity: 1;
}

.act-card--faded-50, .act-card--faded-30, .act-card--faded-20, .act-card--faded-10 {
    opacity: 1;
}

/* ===== SECTIONS ===== */
.section {
    background: var(--charcoal);
    border: 1px solid var(--grey-dark);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-desc {
    font-size: 0.875rem;
    color: var(--grey);
    margin-bottom: var(--spacing-md);
}

/* ===== PHASE PILLS ===== */
.phase-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.phase-pill {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.phase-pill.drop { background: #475569; color: white; }
.phase-pill.smelt { background: #EA580C; color: white; }
.phase-pill.compress { background: #D97706; color: white; }
.phase-pill.pair { background: #CA8A04; color: white; }
.phase-pill.map { background: #65A30D; color: white; }
.phase-pill.synthesize { background: #059669; color: white; }
.phase-pill.collapse { background: #0891B2; color: white; }

/* ===== FLOW DIAGRAM ===== */
.flow-diagram {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.flow-box {
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    text-align: left;
    border: 2px solid;
}

.flow-box.raw { background: rgba(71, 85, 105, 0.2); border-color: #475569; }
.flow-box.forge { background: rgba(234, 88, 12, 0.15); border-color: #EA580C; }
.flow-box.compress { background: rgba(217, 119, 6, 0.15); border-color: #D97706; }
.flow-box.map { background: rgba(101, 163, 13, 0.15); border-color: #65A30D; }
.flow-box.synthesize { background: rgba(5, 150, 105, 0.15); border-color: #059669; }
.flow-box.collapse { background: rgba(8, 145, 178, 0.15); border-color: #0891B2; }
.flow-box.final { background: var(--purple); color: white; border-color: var(--purple); font-weight: 700; }

.flow-arrow {
    font-size: 1.5rem;
    color: var(--grey-dark);
}

/* ===== RELATIONSHIP SYMBOLS ===== */
.rel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs);
}

.rel-card {
    padding: var(--spacing-sm);
    border-radius: 4px;
    text-align: left;
}

.rel-card .symbol {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.rel-card .name {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.rel-card .desc {
    font-size: 0.625rem;
    opacity: 0.8;
}

.rel-contradiction { background: rgba(239, 68, 68, 0.2); color: #FCA5A5; }
.rel-tension { background: rgba(249, 115, 22, 0.2); color: #FDBA74; }
.rel-alignment { background: rgba(34, 197, 94, 0.2); color: #86EFAC; }
.rel-echo { background: rgba(59, 130, 246, 0.2); color: #93C5FD; }
.rel-dependency { background: rgba(168, 85, 247, 0.2); color: #C4B5FD; }
.rel-silence { background: rgba(107, 114, 128, 0.2); color: #D1D5DB; }
.rel-blindspot { background: rgba(234, 179, 8, 0.2); color: #FDE047; }
.rel-inflation { background: rgba(236, 72, 153, 0.2); color: #F9A8D4; }

/* ===== MATRIX TABLE ===== */
.matrix-container {
    overflow-x: auto;
}

.matrix-table {
    border-collapse: collapse;
    font-size: 0.875rem;
}

.matrix-table th,
.matrix-table td {
    width: 3rem;
    height: 3rem;
    text-align: left;
    border: 1px solid var(--grey-dark);
}

.matrix-table th {
    font-family: var(--font-family);
    font-weight: 700;
    background: var(--black);
}

.matrix-table th.col-header { color: var(--green); }
.matrix-table th.row-header { color: var(--blue); }

.matrix-table td {
    font-size: 1.25rem;
    cursor: default;
    transition: transform 0.2s ease;
}

.matrix-table td:hover {
    transform: scale(1.1);
}

/* ===== ACT CARDS ===== */
.act-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.act-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--black);
    border-radius: 4px;
}

.act-number {
    width: 3rem;
    height: 3rem;
    background: var(--purple);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.act-info {
    flex-grow: 1;
}

.act-name {
    font-weight: 700;
    color: var(--cream);
}

.act-sic {
    font-size: 0.75rem;
    color: var(--grey);
}

.act-questions {
    font-size: 0.75rem;
    text-align: right;
    flex-shrink: 0;
}

.act-questions .q1 { color: var(--blue); }
.act-questions .q2 { color: var(--green); }

.act-output {
    background: var(--charcoal);
    border: 2px solid rgba(139, 92, 246, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 120px;
    text-align: left;
}

/* ===== THREAD ARCHITECTURE ===== */
.thread-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.thread-box {
    padding: var(--spacing-sm);
    border-radius: 4px;
}

.thread-box.forge {
    background: rgba(71, 85, 105, 0.2);
    border: 1px solid #475569;
}

.thread-box.social {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.thread-box h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-xs);
}

.thread-box.forge h4 { color: #94A3B8; }
.thread-box.social h4 { color: var(--purple); }

.thread-list {
    font-family: var(--font-family);
    font-size: 0.75rem;
    color: var(--cream);
    opacity: 0.8;
}

.thread-list .comment {
    color: var(--grey);
}

.thread-list .comment--mt {
    margin-top: 0.5rem;
}

.thread-list__through {
    color: var(--grey);
}

/* ===== TRIANGULATION ===== */
.triangulation {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(139, 92, 246, 0.3);
    padding: var(--spacing-lg);
    text-align: left;
}

.tri-grid {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.tri-box {
    padding: var(--spacing-md);
    border-radius: 4px;
    width: 140px;
    text-align: left;
}

.tri-box.public { background: rgba(59, 130, 246, 0.2); border: 1px solid rgba(59, 130, 246, 0.4); }
.tri-box.documents { background: rgba(34, 197, 94, 0.2); border: 1px solid rgba(34, 197, 94, 0.4); }
.tri-box.voices { background: rgba(168, 85, 247, 0.2); border: 1px solid rgba(168, 85, 247, 0.4); }
.tri-box.final { background: var(--cream); color: var(--black); }

.tri-box .icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.tri-box .label {
    font-weight: 700;
    font-size: 0.875rem;
}

.tri-box .sublabel {
    font-size: 0.625rem;
    opacity: 0.7;
}

.tri-plus {
    font-size: 1.5rem;
    color: var(--grey);
}

/* ===== CRYPTIC ENDING ===== */
.cryptic-end {
    text-align: left;
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-xl) var(--left-offset);
    border: 1px solid var(--grey-dark);
    background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%);
    margin-top: var(--spacing-xl);
    position: relative;
}

.cryptic-end::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--purple), transparent);
}

.cryptic-symbol {
    font-size: 3rem;
    color: var(--purple);
    opacity: 0.3;
    margin-bottom: var(--spacing-md);
}

.cryptic-text {
    font-family: var(--font-family);
    font-size: 1.25rem;
    font-style: normal;
    color: var(--cream);
    opacity: 0.6;
    max-width: 500px;
    margin: 0 0 var(--spacing-md);
    line-height: 1.6;
}

.cryptic-code {
    font-family: var(--font-family);
    font-size: 0.625rem;
    color: var(--grey-dark);
    letter-spacing: 0.3em;
}

/* ===== FOOTER ===== */
.footer-sig {
    text-align: left;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--grey-dark);
    font-size: 0.875rem;
    color: var(--grey);
    font-style: normal;
}

/* ===== INLINE STYLE REPLACEMENTS ===== */

/* Back link */
.back-link {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--grey);
}

.back-link a {
    color: var(--green);
}

/* Section titles */
.section-title--left {
    text-align: left;
}

/* Redact glass spacing */
.redact-glass--mb {
    margin-bottom: var(--spacing-lg);
}

/* Redacted proprietary section */
.redacted-proprietary {
    background: var(--black);
    border: 1px solid var(--purple);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

.redacted-proprietary__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    font-size: 4rem;
    font-weight: 700;
    color: rgba(139, 92, 246, 0.08);
    white-space: nowrap;
    pointer-events: none;
}

.redacted-proprietary__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--purple);
    font-family: monospace;
    margin-bottom: var(--spacing-sm);
}

.redacted-proprietary__title {
    font-size: 1.25rem;
    color: var(--cream);
    margin-bottom: var(--spacing-sm);
}

.redacted-proprietary__text {
    font-size: 0.875rem;
    color: var(--grey);
    line-height: 1.7;
}

.redacted-proprietary__tags {
    margin-top: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.redacted-proprietary__tag {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--grey-dark);
    color: var(--grey);
}

/* Act card opacity variants */
.act-card--faded-50 { opacity: 0.5; }
.act-card--faded-30 { opacity: 0.3; }
.act-card--faded-20 { opacity: 0.2; }
.act-card--faded-10 { opacity: 0.1; }

/* Act flow badges */
.act-flow {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.act-flow__badge {
    background: rgba(202, 138, 4, 0.15);
    border: 2px solid #CA8A04;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-align: left;
}

.act-flow__badge-title {
    font-weight: 700;
}

.act-flow__badge-sub {
    font-size: 0.75rem;
}

/* SIC tables grid */
.sic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

/* SIC table container */
.sic-table-container {
    border-radius: 4px;
    padding: var(--spacing-sm);
}

.sic-table-container--blue {
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.sic-table-container--green {
    border: 2px solid rgba(34, 197, 94, 0.3);
}

.sic-table-container--gold {
    border: 2px solid rgba(202, 138, 4, 0.3);
}

.sic-table-container--red {
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.sic-table-container--purple {
    border: 2px solid rgba(139, 92, 246, 0.3);
}

.sic-table__title {
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
}

.sic-table__title--blue { color: var(--blue); }
.sic-table__title--green { color: var(--green); }
.sic-table__title--gold { color: var(--gold); }
.sic-table__title--red { color: var(--red); }
.sic-table__title--purple { color: var(--purple); }

/* SIC data table */
.sic-table {
    width: 100%;
    font-size: 0.75rem;
    border-collapse: collapse;
}

.sic-table th {
    text-align: left;
    padding: 0.5rem 0;
}

.sic-table th:first-child { width: 40px; }
.sic-table th:last-child { width: 60px; }

.sic-table tr {
    border-bottom: 1px solid var(--grey-dark);
}

.sic-table td {
    padding: 0.5rem 0;
}

.sic-table__id {
    font-family: var(--font-mono);
    font-weight: 700;
}

.sic-table__id--blue { color: var(--blue); }
.sic-table__id--green { color: var(--green); }
.sic-table__id--gold { color: var(--gold); }
.sic-table__id--red { color: var(--red); }
.sic-table__id--purple { color: var(--purple); }

.sic-table__algebra {
    font-family: var(--font-mono);
    padding: 0.25rem;
    border-radius: 2px;
}

.sic-table__algebra--blue { background: rgba(59, 130, 246, 0.1); }
.sic-table__algebra--green { background: rgba(34, 197, 94, 0.1); }
.sic-table__algebra--gold { background: rgba(202, 138, 4, 0.1); }
.sic-table__algebra--red { background: rgba(239, 68, 68, 0.1); }
.sic-table__algebra--purple { background: rgba(139, 92, 246, 0.1); }

/* Collision section */
.collision-section {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.collision-list {
    flex-grow: 1;
    min-width: 280px;
}

.collision-list__title {
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    font-size: 0.875rem;
}

.collision-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.collision-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--black);
    border-radius: 4px;
}

.collision-item__code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.collision-item__symbol {
    font-size: 1.25rem;
}

.collision-item__desc {
    font-size: 0.75rem;
}

/* Access granted icon */
.access-granted-icon {
    color: var(--green);
}

/* Act card arrow */
.act-arrow {
    font-size: 1.5rem;
    color: var(--grey-dark);
}

/* Pattern alert box */
.pattern-alert {
    margin-top: var(--spacing-sm);
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
}

.pattern-alert__label {
    font-weight: 700;
    color: var(--amber);
}

.pattern-alert__text {
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

/* Final convergence */
.final-convergence {
    margin-top: var(--spacing-md);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm);
}

.final-convergence__acts {
    display: flex;
    gap: 0.5rem;
}

.final-convergence__act {
    width: 2rem;
    height: 2rem;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.final-convergence__arrow {
    font-size: 2rem;
    color: var(--grey-dark);
}

.final-convergence__result {
    background: var(--purple);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 700;
}

/* Thread list grey text */
.thread-list__ellipsis {
    color: var(--grey);
}

/* Footer source text */
.footer-sig__source {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Triangulation modifiers */
.triangulation .section-title {
    text-align: left;
    margin-bottom: var(--spacing-xs);
}

.triangulation .section-desc {
    text-align: left;
    margin-bottom: var(--spacing-md);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }

    img, svg, video, pre {
        max-width: 100%;
    }

    .final-convergence {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    .sic-grid {
        grid-template-columns: 1fr;
    }

    .collision-section {
        flex-direction: column;
    }
    body {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .rel-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .thread-grid {
        grid-template-columns: 1fr;
    }

    .tri-grid {
        flex-direction: column;
    }

    .act-card {
        flex-wrap: wrap;
    }

    .act-questions {
        text-align: left;
        width: 100%;
        margin-top: var(--spacing-xs);
    }

    .act-output {
        width: 100%;
        margin-top: var(--spacing-xs);
    }

    .access-form {
        flex-direction: column;
    }

    .access-btn {
        width: 100%;
    }
}