/* Claude connector docs page. A reading sheet: the answer first, then the real sample page the check reads,
   with its two columns marked the way the check flags them. */
.cpc { padding: var(--wp-12) 0 var(--wp-16); }
.cpc :where(h1, h2, h3) { text-wrap: wrap; }
.cpc-top { display: grid; gap: var(--wp-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
.cpc-kicker { font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wp-muted); margin: 0 0 var(--wp-3); }
.cpc h1 { font-family: var(--wp-font-display); font-weight: 600; font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1; letter-spacing: -.015em; margin: 0 0 var(--wp-6); max-width: 15ch; }
.cpc-lede { font-size: var(--wp-text-lede); line-height: 1.5; max-width: 34rem; margin: 0 0 var(--wp-6); }
.cpc-actions { display: flex; flex-wrap: wrap; gap: var(--wp-3) var(--wp-6); align-items: center; margin: 0 0 var(--wp-8); }
.cpc-actions a { min-height: 48px; display: inline-flex; align-items: center; }
.cpc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; max-width: 34rem; border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.cpc-facts div { padding: var(--wp-3) var(--wp-4) var(--wp-3) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
.cpc-facts dt { font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--wp-muted); }
.cpc-facts dd { margin: var(--wp-1) 0 0; font-weight: 600; overflow-wrap: anywhere; }
.cpc-facts div:last-child { grid-column: 1 / -1; }
.cpc-facts dd a { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* The object: the real sample page, columns outlined */
.cpc-sheet { margin: 0; }
.cpc-page { position: relative; background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); box-shadow: 10px 10px 0 var(--wp-cited); max-width: 26rem; }
.cpc-page img { display: block; width: 100%; height: auto; }
.cpc-col { position: absolute; top: 11.6%; border: 2px solid var(--oa-blue-deep); background: rgb(45 79 147 / .07); }
.cpc-col--1 { left: 8.8%; width: 40.4%; height: 33.4%; }
.cpc-col--2 { left: 50.9%; width: 40.4%; height: 29.4%; }
.cpc-col span { position: absolute; bottom: -2px; left: -2px; transform: translateY(100%); background: var(--oa-blue-deep); color: var(--oa-paper); font: 500 .75rem/1 var(--wp-font-mono); letter-spacing: .04em; padding: 4px 6px; white-space: nowrap; }
.cpc-sheet figcaption { margin-top: var(--wp-6); font-size: var(--wp-text-meta); line-height: 1.5; color: var(--wp-muted); max-width: 26rem; }
.cpc-sheet figcaption a { color: var(--wp-ink); display: inline-block; padding: 13px 0; margin: -13px 0; }

/* Sections */
.cpc-section { margin-top: var(--wp-16); }
.cpc-section > h2 { font-family: var(--wp-font-display); font-weight: 600; font-size: var(--wp-text-title); line-height: 1.04; border-top: var(--wp-rule-strong) solid var(--wp-ink); padding-top: var(--wp-6); margin: 0 0 var(--wp-6); scroll-margin-top: var(--wp-6); }
.cpc h3 { font-family: var(--wp-font-body); font-weight: 600; font-size: var(--wp-text-h3); line-height: 1.3; margin: 0 0 var(--wp-3); }
.cpc p, .cpc li { max-width: var(--wp-measure); }
.cpc ul, .cpc ol { padding-left: 1.25rem; }
.cpc li + li { margin-top: var(--wp-2); }
.cpc-small { font-size: var(--wp-text-meta); color: var(--wp-muted); }
.cpc-small a { color: var(--wp-ink); }
.cpc-note { color: var(--wp-muted); }

.cpc-split { display: grid; gap: var(--wp-8); grid-template-columns: minmax(0, 1fr); }
.cpc-not { background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); padding: var(--wp-6); align-self: start; }
.cpc-not ul { margin: 0; }

.cpc-tools { display: grid; gap: var(--wp-6); grid-template-columns: minmax(0, 1fr); }
.cpc-tool { border-top: var(--wp-rule-strong) solid var(--wp-ink); padding-top: var(--wp-4); }
.cpc-tool-name { margin: 0 0 var(--wp-2); }
.cpc-tool-name code, .cpc-url code { font: 500 var(--wp-text-ledger)/1.4 var(--wp-font-mono); background: var(--wp-cited); padding: 2px 6px; overflow-wrap: anywhere; }
.cpc-tool p:last-child { margin-bottom: 0; }

.cpc-url { display: flex; flex-wrap: wrap; gap: var(--wp-2) var(--wp-4); align-items: baseline; border: var(--wp-rule-strong) solid var(--wp-ink); background: var(--wp-panel); padding: var(--wp-4); max-width: var(--wp-measure); }
.cpc-url code { font-size: min(var(--wp-text-ledger), 4.1vw); }
.cpc-nw { white-space: nowrap; }
.cpc-url-label { font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--wp-muted); }
.cpc-steps { display: grid; gap: var(--wp-8); grid-template-columns: minmax(0, 1fr); margin: var(--wp-8) 0 var(--wp-6); }
.cpc-steps ol { margin: 0; }

.cpc .cpc-prompts { list-style: none; padding: 0; margin: var(--wp-6) 0 var(--wp-8); counter-reset: p; max-width: var(--wp-measure); }
.cpc-prompts li { counter-increment: p; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--wp-2); }
.cpc-prompts li + li { margin-top: var(--wp-4); }
.cpc-prompts li::before { content: counter(p); font: 500 var(--wp-text-ledger)/1.6 var(--wp-font-mono); color: var(--wp-muted); padding-top: var(--wp-3); }
.cpc-prompt { margin: 0; font-size: var(--wp-text-body); line-height: 1.55; background: var(--wp-panel); border-left: var(--wp-rule-strong) solid var(--oa-blue-deep); padding: var(--wp-3) var(--wp-4); overflow-wrap: anywhere; user-select: all; }
.cpc .cpc-files { list-style: none; padding: 0; margin: 0 0 var(--wp-4); max-width: var(--wp-measure); }
.cpc-prompt code { font: 400 var(--wp-text-ledger)/1.55 var(--wp-font-mono); }
.cpc-files li { border-top: var(--wp-rule) solid var(--wp-hair); padding: var(--wp-3) 0; margin: 0; }
.cpc-files a { font-family: var(--wp-font-mono); font-size: var(--wp-text-ledger); overflow-wrap: anywhere; display: inline-block; padding: 12px 0; margin: -12px 0; }
.cpc-files span { display: block; color: var(--wp-muted); font-size: var(--wp-text-meta); }

@container page (min-width: 56rem) {
  .cpc { padding-top: var(--wp-16); }
  .cpc-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--wp-16); }
  .cpc-sheet { padding-top: var(--wp-6); }
  .cpc-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--wp-12); }
  .cpc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp-12); }
  .cpc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp-8); }
}