.cp-fig { margin: 2em 0; }
.cp-fig figcaption { font-size: 0.88rem; color: var(--steel-deep); padding-top: 10px; }
.cp-fig .cp-src { margin: 4px 0 0; font-size: 0.82rem; color: var(--steel-deep); }
.cp-fig .cp-src a { color: var(--steel-deep); }
.cp-frame { border: 1px solid var(--horizon); border-radius: 12px; background: var(--paper); padding: 20px; }
.cp-frame-flush { padding: 0; overflow: hidden; }
.cp-foot { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--primary-deep); background: var(--paper-calm); border-radius: 0 8px 8px 0; font-size: 0.95rem; color: var(--ink); max-width: none; }
.article > .cp-match { max-width: 1120px; margin: 2.4em auto; padding-inline: var(--pad); }
.cp-match svg { width: 100%; height: auto; }
.cp-match .cp-match-phone { display: none !important; }
@media (max-width: 899px) {
.cp-match .cp-match-wide { display: none !important; }
.cp-match .cp-match-phone { display: block !important; max-width: 460px; margin-inline: auto; }
.cp-match .cp-frame { padding: 14px 6px; }
.cp-match .cp-foot { margin-inline: 8px; }
}
.cp-panel { fill: var(--paper-calm); stroke: var(--horizon); stroke-width: 2; }
.cp-panel-hub { fill: var(--paper); stroke: var(--primary-deep); stroke-width: 2.5; }
.cp-h { font-family: var(--font-display); font-weight: 700; fill: var(--ink); }
.cp-b { font-family: var(--font-display); font-weight: 700; fill: var(--primary-deep); }
.cp-s { font-family: var(--font-body); font-weight: 400; fill: var(--ink-soft); }
.cp-q { font-family: var(--font-display); font-weight: 700; fill: var(--ink); }
.cp-rule { stroke: var(--horizon); stroke-width: 2; }
.cp-arrow { fill: none; stroke: var(--primary-deep); stroke-width: 3; stroke-linejoin: round; }
.cp-ahead { fill: var(--primary-deep); }
.cp-badge { fill: var(--primary-deep); stroke: var(--paper); stroke-width: 3; }
.cp-badge-t { font-family: var(--font-display); font-weight: 700; fill: var(--paper); }
.cp-ground { stroke: var(--steel-deep); stroke-width: 2; }
.cp-wind { fill: none; stroke: var(--lake); stroke-width: 2.5; stroke-linecap: round; }
.cp-wall { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.cp-roof { fill: var(--steel); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.cp-win { fill: var(--horizon); stroke: var(--ink); stroke-width: 1.5; }
.cp-win-l { stroke: var(--ink); stroke-width: 1.2; }
.cp-gdoor { fill: color-mix(in oklab, var(--steel) 60%, var(--paper)); stroke: var(--ink-soft); stroke-width: 1.5; }
.cp-gdoor-l { stroke: var(--steel-deep); stroke-width: 1.2; }
.cp-trunk { stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; }
.cp-crown { fill: color-mix(in oklab, var(--success) 55%, var(--paper)); }
.cp-sheet { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.cp-sheet-head { fill: var(--primary); }
.cp-bar { stroke: var(--steel); stroke-width: 5; stroke-linecap: round; }
.cp-sheet-bp { fill: color-mix(in oklab, var(--lake) 22%, var(--paper)); stroke: var(--primary-deep); stroke-width: 1.5; }
.cp-bp-door { fill: none; stroke: var(--primary); stroke-width: 1.5; }
.cp-bp-line { stroke: var(--primary); stroke-width: 1; }
.cp-dim { stroke: var(--primary-deep); stroke-width: 1.2; }
.cp-fix { fill: var(--primary-deep); }
.cp-fix-ring { fill: none; stroke: var(--primary-deep); stroke-width: 1.6; }
.cp-brick { fill: color-mix(in oklab, var(--sand) 80%, var(--paper)); }
.cp-course { stroke: color-mix(in oklab, var(--steel-deep) 35%, var(--sand)); stroke-width: 1; }
.cp-opening { fill: var(--paper-calm); }
.cp-strut { stroke: var(--steel-deep); stroke-width: 3; stroke-linecap: round; }
.cp-track { fill: var(--steel-deep); }
.cp-bracket { fill: var(--steel); stroke: var(--steel-deep); stroke-width: 1; }
@media (prefers-reduced-motion: no-preference) {
.cp-match.reveal .cp-step { opacity: 0; }
.cp-match.revealed .cp-step { animation: cp-arrive 0.45s ease-out both; animation-delay: calc(0.3s + var(--i) * 0.4s); }
@keyframes cp-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}
.cp-docs { width: 100%; border-collapse: collapse; font-size: 0.93rem; line-height: 1.4; }
.cp-docs th, .cp-docs td { text-align: left; vertical-align: top; padding: 12px 14px; border-top: 1px solid var(--horizon); }
.cp-docs thead th { font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; color: var(--steel-deep); border-top: 0; border-bottom: 2px solid var(--primary-deep); background: var(--paper-calm); }
.cp-docs tbody th { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.cp-docs tr.cp-qld th, .cp-docs tr.cp-qld td { color: var(--steel-deep); background: color-mix(in oklab, var(--paper-calm) 60%, var(--paper)); }
.cp-docs tr.cp-qld-first th, .cp-docs tr.cp-qld-first td { border-top: 2px dashed var(--steel); }
.cp-ask { display: inline-block; padding-left: 20px; position: relative; }
.cp-ask::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 11px; height: 11px; border-radius: 2px; box-sizing: border-box; }
.cp-ask-yes::before { background: var(--primary-deep); }
.cp-ask-if::before { border: 2px solid var(--primary-deep); background: linear-gradient(135deg, var(--primary-deep) 50%, transparent 50%); }
.cp-ask-no::before { border: 1.5px solid var(--steel-deep); }
.cp-ask-yes, .cp-ask-if { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) {
.cp-docs thead { display: none; }
.cp-docs, .cp-docs tbody, .cp-docs tr { display: block; }
.cp-docs tr { padding: 12px 14px; border-top: 1px solid var(--horizon); }
.cp-docs tr:first-child { border-top: 0; }
.cp-docs tr.cp-qld-first { border-top: 2px dashed var(--steel); }
.cp-docs th, .cp-docs td { display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; padding: 3px 0; border: 0 !important; background: none !important; }
.cp-docs tbody th { display: block; font-size: 1.05rem; padding-bottom: 6px; }
.cp-docs td::before { content: attr(data-th); font-size: 0.78rem; line-height: 1.4; padding-top: 0.15em; color: var(--steel-deep); }
.cp-docs tr.cp-qld { background: color-mix(in oklab, var(--paper-calm) 60%, var(--paper)); }
}
.cp-ape { width: 100%; border-collapse: collapse; }
.cp-ape caption { caption-side: top; text-align: left; padding: 16px 18px 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: var(--ink); background: var(--paper-calm); border-bottom: 2px solid var(--primary-deep); }
.cp-ape th, .cp-ape td { text-align: left; padding: 12px 18px; border-top: 1px solid var(--horizon); vertical-align: middle; }
.cp-ape thead th { font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; color: var(--steel-deep); border-top: 0; }
.cp-ape thead th:last-child, .cp-ape td { text-align: right; }
.cp-ape tbody th { font-weight: 400; color: var(--ink); }
.cp-ape td { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--primary-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-ape tr.cp-ape-rare th, .cp-ape tr.cp-ape-rare td { background: color-mix(in oklab, var(--lake) 18%, var(--paper)); }
.cp-tl-top { display: grid; grid-template-columns: 44% 12% 44%; align-items: end; }
.cp-ev { position: relative; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.cp-ev p { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); }
.cp-ev .cp-ev-date { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.cp-ev .cp-ev-head { font-family: var(--font-display); font-weight: 700; color: var(--primary-deep); margin-bottom: 4px; }
.cp-ev-1 { grid-column: 1; }
.cp-ev-3 { grid-column: 3; }
.cp-ev-1::after, .cp-ev-3::after { content: ""; position: absolute; top: 100%; left: var(--lead); height: 22px; border-left: 2px dashed var(--steel-deep); }
.cp-tl-axis { position: relative; height: 64px; }
.cp-tl-line { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--steel-deep); }
.cp-tl-tick { position: absolute; left: var(--p); top: 16px; height: 14px; border-left: 2px solid var(--steel-deep); }
.cp-tl-year { position: absolute; left: var(--p); top: 36px; transform: translateX(-50%); font-size: 0.8rem; color: var(--steel-deep); }
.cp-tl-pt { position: absolute; left: var(--p); top: 14px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--primary-deep); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--primary-deep); }
.cp-tl-pt-soft { background: var(--paper); }
.cp-tl-now-line { position: absolute; left: var(--p); top: 4px; bottom: 0; border-left: 2px dotted var(--primary); }
.cp-tl-bot { position: relative; display: grid; grid-template-columns: 22% 30% 1fr; align-items: start; min-height: 3.2em; }
.cp-ev-2 { grid-column: 2; }
.cp-ev-2::before { content: ""; position: absolute; bottom: 100%; left: var(--lead); height: 30px; border-left: 2px dashed var(--steel-deep); }
.cp-ev-2 { border-style: dashed; }
.cp-now { position: absolute; left: var(--p); top: 0; margin: 0; }
.cp-now span { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 700px) {
.cp-tl { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 30px; }
.cp-tl::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--steel-deep); }
.cp-tl-top, .cp-tl-bot { display: contents; }
.cp-tl-axis { display: none; }
.cp-ev-1 { order: 1; } .cp-ev-2 { order: 2; } .cp-now { order: 3; } .cp-ev-3 { order: 4; }
.cp-ev::after, .cp-ev-2::before { display: none; }
.cp-ev::before { content: ""; position: absolute; left: -30px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary-deep); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--primary-deep); box-sizing: border-box; }
.cp-ev-2::before { display: block; background: var(--paper); bottom: auto; height: 16px; border-left: 0; }
.cp-now { position: relative; left: auto; }
.cp-now::before { content: ""; position: absolute; left: -26px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--primary); }
}
.cp-check-wrap { border: 1px solid var(--horizon); border-radius: 12px; background: var(--paper-calm); overflow: hidden; }
.cp-check-head { margin: 0; padding: 12px 16px; font-family: var(--font-display); font-weight: 700; color: var(--paper); background: var(--primary-deep); max-width: none; }
.cp-check { list-style: none; padding: 0; margin: 0; }
.cp-check li + li { border-top: 1px solid var(--horizon); }
.cp-check label { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; cursor: pointer; }
.cp-check input { flex: none; -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 2px 0 0; border: 2px solid var(--steel-deep); border-radius: 5px; background: var(--paper); display: grid; place-content: center; cursor: pointer; }
.cp-check input::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid var(--paper); border-bottom: 2.5px solid var(--paper); transform: translateY(-2px) rotate(-45deg); opacity: 0; }
.cp-check input:checked { background: var(--primary-deep); border-color: var(--primary-deep); }
.cp-check input:checked::after { opacity: 1; }
.cp-check input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cp-n { flex: none; width: 1.3em; font-family: var(--font-display); font-weight: 700; color: var(--steel-deep); line-height: 1.5; }
.cp-ct { line-height: 1.5; }
.cp-note { color: var(--steel-deep); font-size: 0.92em; }
.cp-check input:checked ~ .cp-ct { color: var(--steel-deep); text-decoration: line-through; text-decoration-color: var(--lake); }
.cp-flow { list-style: none; margin: 0; padding: 0; position: relative; }
.cp-flow-step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 18px; }
.cp-flow-step:last-child { padding-bottom: 0; }
.cp-flow-step::before { content: ""; position: absolute; left: 19px; top: 36px; bottom: 0; border-left: 2px solid var(--lake); }
.cp-flow-step:last-child::before { display: none; }
.cp-flow-n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center; background: var(--primary-deep); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.cp-flow-file .cp-flow-n { background: var(--paper); color: var(--primary-deep); box-shadow: inset 0 0 0 3px var(--primary-deep); border-radius: 8px; }
.cp-flow-step p { margin: 6px 0 6px; font-size: 1rem; line-height: 1.5; color: var(--ink); max-width: none; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chip { display: inline-block; padding: 2px 9px; border: 1px solid var(--steel); border-radius: 999px; font-size: 0.8rem; color: var(--steel-deep); text-decoration: none; background: var(--paper-calm); }
.cp-chip:hover { border-color: var(--primary); color: var(--primary-deep); }
@media (max-width: 640px) {
.cp-frame { padding: 16px; }
.cp-frame-flush { padding: 0; }
.cp-flow-step { grid-template-columns: 34px 1fr; gap: 12px; }
.cp-flow-n { width: 32px; height: 32px; font-size: 0.95rem; }
.cp-flow-step::before { left: 16px; top: 32px; }
}
.refs > p { font-size: 0.95rem; color: var(--ink-soft); }
.refs li a { overflow-wrap: anywhere; }