/* ═══════════════════════════════════════════════════════════════
   GRAMMAR PAGE — Component styles
   Page class: body.theme-dark — all components on dark background
   ═══════════════════════════════════════════════════════════════ */

/* ─ TYPOGRAPHY HELPERS ─────────────────────────────────────── */

.grammar-intro {
    max-width: var(--max-width-narrow);
    margin-bottom: var(--spacing-lg);
    font-size: var(--text-md);
    color: var(--ivory-85);
    line-height: var(--leading-loose);
}

.grammar-intro p {
    color: var(--ivory-85);
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 0;
}

.grammar-coda {
    max-width: var(--max-width-narrow);
    margin-top: var(--spacing-lg);
    font-size: var(--text-base);
    color: var(--ivory-85);
    line-height: var(--leading-relaxed);
}

/* ─ INVARIANTS TABLE ─────────────────────────────────────────── */

.invariants-table-wrapper {
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
}

.invariants-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.invariants-table th {
    font-family: var(--font-important);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--ivory-70);
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--white-20);
}

.invariants-table td {
    padding: 1rem;
    color: var(--ivory-85);
    border-bottom: 1px solid var(--white-08);
    line-height: var(--leading-relaxed);
    vertical-align: top;
}

.invariants-table tr:last-child td {
    border-bottom: none;
}

.invariants-table strong {
    color: var(--ivory);
    font-weight: var(--weight-semibold);
}

/* Phase letter cells */
.phase-a,
.phase-u,
.phase-m {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--weight-semibold);
    text-align: center;
    width: 3rem;
    letter-spacing: 0;
}

.phase-a { color: var(--teal-pale); }
.phase-u { color: var(--ivory-70); }
.phase-m { color: var(--gold); }

/* ─ PHASE DETAIL GRID (sub-processes) ──────────────────────── */

.phase-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.phase-detail {
    padding: var(--spacing-md);
    border: 1px solid var(--white-08);
    border-top: 2px solid var(--white-20);
}

.phase-detail--a { border-top-color: var(--teal-pale); }
.phase-detail--m { border-top-color: var(--gold); }

.phase-detail__letter {
    display: block;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: var(--weight-semibold);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.phase-detail--a .phase-detail__letter { color: var(--teal-pale); }
.phase-detail--u .phase-detail__letter { color: var(--ivory-70); }
.phase-detail--m .phase-detail__letter { color: var(--gold); }

.phase-detail__name {
    display: block;
    font-family: var(--font-important);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-ultra);
    text-transform: uppercase;
    color: var(--ivory-70);
    margin-bottom: var(--spacing-md);
}

.phase-detail__desc {
    font-size: var(--text-sm);
    color: var(--ivory-80);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--spacing-md);
}

.phase-detail__mechanics {
    list-style: none;
    padding: 0;
    margin: 0;
}

.phase-detail__mechanics li {
    font-size: var(--text-sm);
    color: var(--ivory-85);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--white-05);
    letter-spacing: var(--tracking-tight);
}

.phase-detail__mechanics li:last-child {
    border-bottom: none;
}

/* ─ WHY THREE GRID ──────────────────────────────────────────── */

.why-three-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.why-three-item {
    padding: var(--spacing-md) var(--spacing-md-plus);
    border: 1px solid var(--white-08);
    border-top: 2px solid var(--gold-40);
}

.why-three-item__label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ivory);
    margin-bottom: var(--spacing-sm);
    letter-spacing: var(--tracking-normal);
}

.why-three-item p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--ivory-80);
    margin: 0;
}

/* ─ PRINCIPLE CONTENT ───────────────────────────────────────── */

.principle-content {
    max-width: var(--max-width-narrow);
}

.principle-content p {
    margin-bottom: var(--paragraph-gap);
    line-height: var(--leading-loose);
}

.principle-content p:last-child {
    margin-bottom: 0;
}

/* ─ AXIOM GRID ──────────────────────────────────────────────── */

.axiom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.axiom-item {
    padding: var(--spacing-md) var(--spacing-md-plus);
    border: 1px solid var(--white-08);
    border-left: 3px solid var(--gold-40);
}

.axiom-number {
    display: block;
    font-family: var(--font-important);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-ultra);
    color: var(--gold);
    margin-bottom: var(--spacing-sm);
}

.axiom-item p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--ivory-85);
    margin: 0;
}

/* ─ CLIENT TYPES GRID ───────────────────────────────────────── */

.client-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.client-type {
    padding: var(--spacing-md);
    border: 1px solid var(--white-08);
    border-left: 3px solid var(--gold-40);
}

.client-type__label {
    display: block;
    font-family: var(--font-important);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ivory);
    margin-bottom: var(--spacing-xs);
}

.client-type__desc {
    font-size: var(--text-sm);
    color: var(--ivory-80);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--spacing-xs);
}

.client-type__triads {
    font-family: var(--font-important);
    font-size: var(--text-xs-plus);
    letter-spacing: var(--tracking-wide);
    color: var(--gold);
    margin: 0;
}

/* ─ RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 768px) {
    .why-three-grid,
    .phase-detail-grid,
    .client-types-grid {
        grid-template-columns: 1fr;
    }

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

    .invariants-table th:nth-child(4),
    .invariants-table td:nth-child(4) {
        display: none;
    }
}