/*
 * Intelligence724 v2.5.4 — intrinsic Method layout remediation.
 *
 * This file is intentionally loaded after proof-method-v254.css. It protects
 * the five-stage method from viewport-only assumptions, stale generic page
 * templates, browser text enlargement, and ordinary-word fragmentation.
 */

/* The method must react to the width it actually receives, not only the viewport. */
.i724-method-content,
.i724-method-page .i724-article-content {
    container: i724-method-content / inline-size;
    min-width: 0;
}

/* Defensive fallback for a stale database identity that reaches page-standard.php. */
.i724-method-page .i724-article-layout,
.i724-method-page .i724-article-layout-wide,
.i724-method-page .i724-article-layout-full {
    grid-template-columns: minmax(0, 1fr);
}

.i724-method-page .i724-article-aside {
    display: none;
}

.i724-method-page :is(
    .i724-method-section-head,
    .i724-method-section-head-split,
    .i724-method-map,
    .i724-method-map > *,
    .i724-method-map > * > div,
    .i724-governance-spine,
    .i724-governance-spine-copy,
    .i724-governance-spine ul,
    .i724-method-rule-grid,
    .i724-gate-grid,
    .i724-risk-tier-grid
) {
    min-width: 0;
}

/* Normal prose wraps at word boundaries. Only genuine unbroken tokens may split. */
.i724-method-page :is(
    .i724-method-section-head h2,
    .i724-method-map h3,
    .i724-method-map strong,
    .i724-method-rule-grid h3,
    .i724-gate-grid h3,
    .i724-risk-tier-grid h3,
    .i724-governance-spine strong,
    .i724-governance-spine li
) {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

.i724-method-page :is(
    .i724-method-section-head p,
    .i724-method-map p,
    .i724-method-map small,
    .i724-method-rule-grid p,
    .i724-gate-grid p,
    .i724-risk-tier-grid p,
    .i724-risk-tier-grid li,
    .i724-governance-spine-copy span
) {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/*
 * Intrinsic stage layout. Five columns are permitted only when the content
 * region can provide a genuinely readable minimum. At narrower component
 * widths the cards become three, two, or one columns without waiting for a
 * viewport breakpoint.
 */
.i724-method-map {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important;
    gap: clamp(0.875rem, 1.5cqi, 1.25rem) !important;
    width: 100%;
    margin: 0;
}

.i724-method-map > * {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    min-height: 0 !important;
    padding: clamp(1.25rem, 2.6cqi, 1.75rem) !important;
    border: 1px solid var(--i724-line-light);
    border-top: 4px solid var(--i724-blue-2);
    border-radius: 0.75rem;
    background: linear-gradient(155deg, #f4f8fc, #fff);
}

.i724-method-map > * > div,
.i724-method-stage-copy {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem !important;
    min-width: 0;
    width: 100%;
}

/* Exact support for both the current semantic body and v2.5.2/v2.5.3 bodies. */
.i724-method-map > * > :is(span,strong,small,p),
.i724-method-map > * > div > :is(h3,strong,small,p) {
    display: block;
    grid-column: auto !important;
    min-width: 0;
    max-width: 100%;
}

.i724-method-number,
.i724-method-map > * > span:first-child {
    align-self: flex-start;
    width: auto !important;
    margin: 0 0 clamp(1rem, 2.1cqi, 1.5rem) !important;
    color: var(--i724-blue-2);
    font-family: var(--i724-font-mono);
    font-size: clamp(0.72rem, 1.2cqi, 0.8rem);
    font-weight: 900;
    line-height: 1;
}

.i724-method-map :is(h3,strong) {
    width: 100%;
    margin: 0 !important;
    color: var(--i724-ink-950);
    font-size: clamp(1.25rem, 2.1cqi, 1.55rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.i724-method-map :is(p,small),
.i724-method-stage-summary {
    width: 100%;
    margin: 0 !important;
    color: var(--i724-ink-600);
    font-size: clamp(0.9rem, 1.45cqi, 1rem) !important;
    line-height: 1.58 !important;
    text-wrap: pretty;
}

/* The section introduction stacks when its actual content region is constrained. */
.i724-method-section-head-split {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)) !important;
    align-items: end;
}

.i724-method-section-head h2 {
    max-width: 15ch;
}

.i724-method-section-head-split > p {
    max-width: 47rem;
}

/* Governance remains an explanatory control layer, not a field of tiny chips. */
.i724-governance-spine {
    display: grid !important;
    grid-template-columns: minmax(13rem, 0.7fr) minmax(0, 1.8fr) !important;
    align-items: center;
    gap: clamp(1.25rem, 3cqi, 3rem) !important;
    margin-top: clamp(1rem, 2cqi, 1.5rem);
    padding: clamp(1.25rem, 2.5cqi, 1.75rem) !important;
}

.i724-governance-spine-copy {
    display: grid;
    gap: 0.45rem;
}

.i724-governance-spine ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)) !important;
    gap: 0.55rem !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.i724-governance-spine li {
    display: flex;
    align-items: center;
    margin: 0 !important;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.7rem 0.8rem !important;
    border: 1px solid rgba(126, 201, 255, 0.28);
    border-radius: 0.6rem !important;
    font-size: clamp(0.72rem, 1.1cqi, 0.82rem) !important;
    line-height: 1.25;
    text-align: center;
}

/* Component-width breakpoints also work inside a generic article/sidebar shell. */
@container i724-method-content (max-width: 52rem) {
    .i724-method-section-head-split {
        grid-template-columns: 1fr !important;
        align-items: start;
    }

    .i724-method-section-head h2 {
        max-width: 18ch;
    }
}

@container i724-method-content (max-width: 40rem) {
    .i724-governance-spine {
        grid-template-columns: 1fr !important;
        align-items: start;
    }
}

@container i724-method-content (max-width: 32rem) {
    .i724-method-map {
        grid-template-columns: 1fr !important;
    }

    .i724-method-map > * {
        padding: 1.2rem !important;
    }

    .i724-governance-spine ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@container i724-method-content (max-width: 20rem) {
    .i724-governance-spine ul {
        grid-template-columns: 1fr !important;
    }
}

/* Fallbacks for engines without container-query support. */
@supports not (container-type: inline-size) {
    @media (max-width: 1180px) {
        .i724-method-map {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 820px) {
        .i724-method-map,
        .i724-method-section-head-split,
        .i724-governance-spine {
            grid-template-columns: 1fr !important;
        }
    }
}

@media (max-width: 760px) {
    .i724-method-map {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)) !important;
    }
}

@media (max-width: 430px) {
    .i724-method-map,
    .i724-governance-spine,
    .i724-governance-spine ul {
        grid-template-columns: 1fr !important;
    }
}

@media (forced-colors: active) {
    .i724-method-map > *,
    .i724-governance-spine,
    .i724-governance-spine li {
        border: 1px solid CanvasText;
    }
}

@media print {
    .i724-method-map {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .i724-governance-spine {
        color: #000 !important;
        background: #fff !important;
        border: 1px solid #000;
    }
}