/* ==========================================================================
   Client-facing technical brief / reply document (bilingual).
   Used by page-road-to-1m-spec.php. Built on the redesign tokens so the page
   sits inside the site rather than looking like a pasted-in PDF.
   ========================================================================== */

.kxp-brief {
    --brief-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    padding-block: clamp(6.5rem, 12vh, 9rem) clamp(4rem, 9vw, 7rem);
}
.kxp-brief__shell { max-width: 52rem; margin-inline: auto; }

/* ── Masthead ───────────────────────────────────────────────────────────── */
.kxp-brief__mast { border-bottom: 2px solid var(--kxp-black); padding-bottom: 1.5rem; }
.kxp-brief__title {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-3);
    font-weight: 800; line-height: 1.02;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    margin: 1rem 0 0;
    text-wrap: balance;
}
.kxp-brief__meta {
    display: flex; flex-wrap: wrap; gap: 0.4rem 2.25rem;
    margin-top: 1.4rem;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1);
    font-weight: 600;
    color: var(--kxp-grey-500);
}
.kxp-brief__meta b {
    color: var(--kxp-black); font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-right: 0.45rem;
}

/* ── Language switch ────────────────────────────────────────────────────── */
.kxp-brief__langbar {
    /* Sticks below the fixed site header, not under it. --kxp-hdr-h is measured
       and published by redesign.js; the fallbacks are the header's two layouts. */
    position: sticky; top: var(--kxp-hdr-h, 113px); z-index: 20;
    display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
    padding: 0.9rem 0;
    background: var(--kxp-white);
    border-bottom: 1px solid var(--kxp-grey-100);
}
.kxp-brief__langlabel {
    font-family: var(--kxp-font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--kxp-grey-500);
    margin-right: 0.5rem;
}
.kxp-brief__lang {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.45rem 1rem;
    border: 1px solid var(--kxp-grey-300);
    background: transparent; color: var(--kxp-grey-700);
    cursor: pointer;
    transition: background 0.3s var(--kxp-ease), color 0.3s var(--kxp-ease), border-color 0.3s var(--kxp-ease);
}
.kxp-brief__lang:hover { border-color: var(--kxp-black); color: var(--kxp-black); }
.kxp-brief__lang[aria-pressed="true"] {
    background: var(--kxp-black); border-color: var(--kxp-black); color: var(--kxp-white);
}
.kxp-brief__lang:focus-visible { outline: 2px solid var(--kxp-accent); outline-offset: 2px; }

/* ── Prose rhythm ───────────────────────────────────────────────────────── */
.kxp-brief__lede {
    font-size: var(--kxp-step-1);
    line-height: 1.5;
    color: var(--kxp-black);
    margin: 2.2rem 0 0;
}
.kxp-brief__lede + .kxp-brief__lede { margin-top: 1rem; }

.kxp-brief h2 {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-2);
    font-weight: 700; line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 3.4rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--kxp-grey-100);
    text-wrap: balance;
}
.kxp-brief h3 {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700; line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
}
.kxp-brief p { margin: 0.85rem 0 0; color: var(--kxp-grey-700); }
.kxp-brief__note { margin-top: 0.5rem !important; color: var(--kxp-grey-500); }

/* ── The fourteen answers ───────────────────────────────────────────────── */
.kxp-brief__answers { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.kxp-brief__answers > li {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 0 1rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--kxp-grey-100);
}
.kxp-brief__answers > li:first-child { border-top: 1px solid var(--kxp-grey-100); }
.kxp-brief__num {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--kxp-accent);
    padding-top: 0.15rem;
}
.kxp-brief__q {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0); font-weight: 700;
    line-height: 1.35;
    color: var(--kxp-black);
}
.kxp-brief__chip {
    font-family: var(--kxp-font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.22rem 0.55rem;
    background: var(--kxp-black); color: var(--kxp-white);
    white-space: nowrap;
}
.kxp-brief__chip--flag { background: var(--kxp-accent); }
.kxp-brief__answers p { margin-top: 0.4rem; }

/* ── Issue blocks ───────────────────────────────────────────────────────── */
.kxp-brief__issue {
    border-left: 2px solid var(--kxp-accent);
    padding-left: 1.35rem;
    margin-top: 2.2rem;
}

.kxp-brief__panel {
    background: var(--kxp-grey-50);
    padding: 1.25rem 1.35rem;
    margin-top: 1.15rem;
    clip-path: polygon(var(--kxp-chamfer) 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%, 0 var(--kxp-chamfer));
}
.kxp-brief__panel-label {
    font-family: var(--kxp-font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--kxp-grey-500);
    margin: 0 0 0.85rem;
}

/* ── Code collision demo ────────────────────────────────────────────────── */
.kxp-brief__codes { display: grid; gap: 0.6rem; }
.kxp-brief__coderow {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.25rem 1.25rem;
    align-items: baseline;
}
.kxp-brief__codesrc {
    font-family: var(--kxp-font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--kxp-grey-500);
}
.kxp-brief__code {
    font-family: var(--brief-mono);
    font-size: 1.05rem; letter-spacing: 0.05em;
    color: var(--kxp-black);
    overflow-x: auto;
}
.kxp-brief__hit {
    background: rgba(225, 6, 0, 0.14);
    color: var(--kxp-accent-dk);
    font-weight: 600;
    padding: 0.05em 0.16em;
}
.kxp-brief code {
    font-family: var(--brief-mono);
    font-size: 0.88em;
    background: var(--kxp-grey-50);
    padding: 0.1em 0.36em;
    color: var(--kxp-black);
}

/* ── Lists ──────────────────────────────────────────────────────────────── */
.kxp-brief__list { margin: 1rem 0 0; padding-left: 1.3rem; color: var(--kxp-grey-700); }
.kxp-brief__list li { margin-top: 0.45rem; }
.kxp-brief__list li::marker { color: var(--kxp-accent); }

.kxp-brief__signoff {
    margin-top: 3.2rem; padding-top: 1.6rem;
    border-top: 2px solid var(--kxp-black);
}

/* ── Language panes ─────────────────────────────────────────────────────── */
.kxp-brief__pane { display: none; }
.kxp-brief__pane.is-on { display: block; }

@media (max-width: 900px) {
    .kxp-brief__langbar { top: var(--kxp-hdr-h, 76px); }
}
@media (max-width: 34rem) {
    .kxp-brief__answers > li { grid-template-columns: 2rem 1fr; }
    .kxp-brief__coderow { grid-template-columns: 1fr; }
}

/* The whole argument of that section is that the two glyphs look alike, so the
   demo has to name them outright — otherwise the reader just sees two
   near-identical strings and takes the point on trust. */
.kxp-brief__codenote {
    grid-column: 2;
    font-family: var(--kxp-font-display);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--kxp-grey-500);
}
@media (max-width: 34rem) {
    .kxp-brief__codenote { grid-column: 1; }
}