/* COPY & CONTENT (browse/copy-content.html), 2026-10-27. House tokens only (site.css).
   A catalog of rows: name and principle on the left, the specimen on the right; no grid cells to leave empty.
   The mark is the ink highlighter (founder G2-3): a band in the palette's own neutral, never an accent colour.
   Night uses --rule-firm, the night palette's strongest neutral, because --paper-3 disappears there. */

:root { --cpy-wash: var(--paper-3); }
.night { --cpy-wash: var(--rule-firm); }

.cpy-measure { max-width: var(--measure); }
/* The pair is the unit (lane CP, 2026-11-01; brief in Aesthetary Audits/sprint-2026-11-01/CP-copy-page/BRIEF.md).
   Title in the left column; before and after side by side at the same size, so the words carry the difference and the
   highlighter is the only mark on the after. The principle and its links fold into site.css's details.disclose. */
.cpy-topics { border-bottom: 1px solid var(--rule); }
.cpy-topic { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--s2) var(--s6); padding: var(--s5) 0 var(--s4); border-top: 1px solid var(--rule); scroll-margin-top: var(--s6); }
.cpy-topic:first-child { border-top-color: var(--ink); }
.cpy-topic__head { grid-row: 1 / span 2; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); min-width: 0; } /* the title and its Save (WR v3, 2026-11-01) */
.cpy-topic__head .aq-save--icon { flex: none; margin-top: calc(-1 * var(--s1)); }
.cpy-topic__t { grid-row: auto; margin: 0; font: 600 var(--t-base)/1.3 var(--display); color: var(--ink); }

.cpy-spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3) var(--s6); margin: 0; }
.cpy-spec__k { display: block; margin-bottom: var(--s2); font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.cpy-spec__before, .cpy-spec__after { margin: 0; font: var(--t-md)/1.35 var(--display); letter-spacing: -0.005em; }
.cpy-spec__before { color: var(--ink-2); }
.cpy-spec__after { font-weight: 500; color: var(--ink); }
.cpy-spec__t { background: var(--cpy-wash); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

details.cpy-why { grid-column: 2; margin: var(--s1) 0 0; padding: 0; border-top: 0; }
details.cpy-why > summary { width: fit-content; min-height: 24px; padding-block: var(--s1); }
.cpy-why .disclose__body { padding: var(--s1) 0 var(--s2); max-width: 40rem; }
.cpy-topic__p { margin: 0 0 var(--s2); font: var(--t-sm)/1.55 var(--ui); color: var(--ink-2); }
.cpy-topic__links { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: 0; font: var(--t-xs)/1.6 var(--mono); }
.cpy-topic__links a { display: inline-block; min-height: 24px; padding-block: 3px; color: var(--ink-2); }
.cpy-topic__links a:hover { color: var(--ink); }
/* Quiet pointer back to the blueprint section this topic teaches (reviewer request, 2026-11-02). */
.cpy-topic__used { margin: var(--s2) 0 0; font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3); }
.cpy-topic__used a { color: var(--ink-2); }

.cpy-tools { max-width: 52rem; }
.cpy-phases { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s5); margin: 0; padding: 0; list-style: none; }
.cpy-phases li { padding-top: var(--s3); border-top: 1px solid var(--rule-firm); }
.cpy-phases h3 { margin: 0 0 var(--s2); font: 600 var(--t-base)/1.3 var(--display); }
.cpy-phases h3 a { display: inline-block; min-height: 24px; color: var(--ink); text-decoration: none; }
.cpy-phases h3 a:hover { text-decoration: underline; }
.cpy-phases p { margin: 0 0 var(--s2); font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.cpy-phases__t { display: flex; flex-wrap: wrap; gap: 0 var(--s3); font: var(--t-xs)/1.7 var(--mono) !important; }
.cpy-phases__t a { display: inline-block; min-height: 24px; padding-block: 3px; color: var(--ink-3); }
.cpy-fine { margin-top: var(--s8); max-width: var(--measure); font: var(--t-sm)/1.55 var(--ui); color: var(--ink-2); }

/* The contextual entry on Resources and the Plan and Structure stage pages. */
.cpy-entry { margin: var(--s3) 0 0; max-width: 46rem; font: var(--t-sm)/1.55 var(--ui); color: var(--ink-2); }
.cpy-entry a { display: inline-block; min-height: 24px; color: var(--ink); }

/* Under the sticky section strip (elements-areas.css, desktop only) a jump lands below it, not under it. */
@media (min-width: 60.0625rem) {
  .cpy-sec, #phases, .cpy-topic { scroll-margin-top: calc(var(--s9) + var(--s2)); }
}
@media (max-width: 64rem) {
  .cpy-topic { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .cpy-topic__t, .cpy-topic__head { grid-row: auto; }
  details.cpy-why { grid-column: 1; margin-top: 0; }
}
@media (max-width: 40rem) {
  .cpy-spec { grid-template-columns: minmax(0, 1fr); }
  .cpy-spec__before, .cpy-spec__after { font-size: var(--t-base); }
}

/* Filters (copy-content.js): only the chosen section shows. Without script every section shows, as before. */
.cpy-sec[hidden], #phases[hidden] { display: none; }

/* WHERE A TITLE AND DESCRIPTION APPEAR (Savva's review, 2026-11-02): a drawn search result inside "Why it works".
   House tokens only; the result card is a quiet panel, its two parts keyed below it in the page's mono. */
.cpy-serp { margin: var(--s2) 0 var(--s3); }
.cpy-serp__card { padding: var(--s3) var(--s4); border: 1px solid var(--rule-firm); background: var(--paper); max-width: 34rem; }
.cpy-serp__card p { margin: 0; }
.cpy-serp__url { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.cpy-serp__title { margin-top: var(--s1) !important; font: 500 var(--t-md)/1.3 var(--display); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cpy-serp__desc { margin-top: var(--s1) !important; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.cpy-serp__keys { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: var(--s2) 0 0; padding: 0; list-style: none; font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3); }
.cpy-serp__keys b { font-weight: 600; color: var(--ink); margin-right: var(--s1); }
.cpy-serp__cap { margin-top: var(--s1); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }