/* ──────────────────────────────────────────────────────────────────
   Probily · Claude Design — Methodology page section layer
   Ported from docs/design-canon/site/{landing,tokens,methodology}.css and
   SCOPED under `.cd` so it can't clobber the shared public_header/footer or
   collide with generic names (.card/.chip/.gauge). Design tokens come from the
   globally-loaded tokens-bureau.css (values verified identical). Only the three
   `--uc-*` layout helpers are (re)declared here.
   ────────────────────────────────────────────────────────────────── */
/* Width + gutter now come from the shared public contract instead of a
   page-local 1180/40. That local pair was why Methodology's content started at
   x=170 at 1440 while the rest of the public site started at x=214 — a visible
   44px jump every time a reader arrived from any other page. */
.cd { --uc-max: var(--pub-w-wide); --uc-gutter: var(--pub-gutter); --uc-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.cd { font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-0); }


/* ── layout + typography (canon landing.css subset) ── */
.cd .uc-container {max-width: var(--uc-max);
  margin: 0 auto;
  padding: 0 var(--uc-gutter); }
.cd .uc-section {padding-top: var(--pub-sec-y-roomy); padding-bottom: var(--pub-sec-y-roomy); position: relative; }
.cd .uc-section.tight {padding-top: var(--pub-sec-y); padding-bottom: var(--pub-sec-y); }
.cd .uc-section.alt {background: color-mix(in oklch, var(--bg-1) 60%, var(--bg-0)); }
.cd .uc-eyebrow {font-family: var(--font-mono);
  font-size: var(--pub-type-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 10px; }
.cd .uc-eyebrow .tick {color: var(--brand-500); }
.cd .uc-eyebrow::before {content: "";
  width: 20px; height: 1px;
  background: var(--brand-500);
  display: inline-block;
  opacity: 0.7; }
.cd .uc-display {font-family: var(--font-sans);
  font-weight: 560;
  font-size: var(--pub-type-title);
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance; }
.cd .uc-h2 {font-family: var(--font-sans);
  font-weight: 540;
  font-size: var(--pub-type-section);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance; }
.cd .uc-lead {font-family: var(--font-serif);
  font-size: var(--pub-type-body);
  line-height: var(--pub-lh-body);
  color: var(--text-secondary);
  margin: 0;
  text-wrap: pretty;
  max-width: 40em; }
.cd .uc-body {font-size: var(--pub-type-body);
  line-height: var(--pub-lh-body);
  color: var(--text-secondary);
  text-wrap: pretty; }
.cd .uc-btn {display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-2);
  color: var(--text-primary);
  font-size: var(--pub-type-meta);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, transform 140ms var(--uc-ease);
  white-space: nowrap; }
.cd .uc-btn:hover {background: var(--bg-3); }
.cd .uc-btn.primary {background: var(--brand-500);
  color: var(--gray-1000);
  border-color: var(--brand-600);
  font-weight: 600; }
.cd .uc-btn.primary:hover {background: var(--brand-400); transform: translateY(-1px); }
.cd .uc-btn.ghost {background: transparent; }
.cd .uc-btn.ghost:hover {background: var(--bg-1); }
.cd .uc-btn.lg {height: 44px; padding: 0 22px; font-size: var(--pub-type-body); border-radius: var(--r-md); }
.cd .uc-btn .kbd {font-family: var(--font-mono);
  font-size: var(--pub-type-meta);
  padding: 1px 5px;
  border: 1px solid color-mix(in oklch, currentColor 30%, transparent);
  border-radius: 3px;
  opacity: 0.7; }
.cd .uc-hero-copy .uc-display {margin-top: 22px; }
.cd .uc-hero-copy .uc-lead {margin-top: 22px; }
.cd .uc-pill {display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--pub-type-meta);
  letter-spacing: 0.03em;
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  background: var(--bg-1);
  white-space: nowrap;
  line-height: 1; }
.cd .uc-pill .d {width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cd .uc-pill.hit {color: var(--success); border-color: color-mix(in oklch, var(--success) 34%, transparent); background: color-mix(in oklch, var(--success) 9%, var(--bg-1)); }
.cd .uc-pill.verify {color: var(--warning); border-color: color-mix(in oklch, var(--warning) 34%, transparent); background: color-mix(in oklch, var(--warning) 9%, var(--bg-1)); }
.cd .uc-pill.none {color: var(--text-disabled); }
.cd .uc-pill.alert {color: var(--danger); border-color: color-mix(in oklch, var(--danger) 38%, transparent); background: color-mix(in oklch, var(--danger) 10%, var(--bg-1)); }
.cd .uc-point-index {font-family: var(--font-mono);
  font-size: var(--pub-type-meta);
  color: var(--brand-500);
  letter-spacing: 0.06em; }
.cd .uc-point-title {font-family: var(--font-sans);
  font-weight: 560;
  font-size: var(--pub-type-body);
  letter-spacing: -0.01em;
  margin: 4px 0 8px;
  color: var(--text-primary); }
.cd .uc-point-desc {font-size: var(--pub-type-body); line-height: var(--pub-lh-body); color: var(--text-secondary);
  text-wrap: pretty; }
.cd .uc-boundary {border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: color-mix(in oklch, var(--bg-1) 50%, transparent);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start; }
.cd .uc-boundary .ic {color: var(--text-tertiary);
  width: 30px; height: 30px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; }
.cd .uc-boundary .k {font-family: var(--font-mono);
  font-size: var(--pub-type-meta); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-disabled);
  margin-bottom: 5px; }
.cd .uc-aud-head .uc-lead {margin-top: 18px; }
.cd .uc-footer .brandblock .uc-body {max-width: 30ch; margin-top: 14px; }
.cd .uc-reveal {transition: transform 760ms var(--uc-ease); }
@media (prefers-reduced-motion: no-preference) {
  .cd .uc-reveal:not(.in) {transform: translateY(22px); }
  .cd [data-uc-stagger] > * {transition-delay: var(--d, 0ms); }
}
.cd [data-uc-motion="off"] .uc-reveal, .cd [data-uc-motion="off"] .uc-reveal:not(.in) {transform: none !important; transition: none !important; }
.cd [data-uc-scale="cozy"]  .uc-section {padding: 96px 0; }
.cd [data-uc-scale="roomy"] .uc-section {padding: 140px 0; }

/* ── chip + gauge (canon tokens.css) ── */
.cd .chip {display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--pub-type-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  background: var(--bg-1);
  line-height: 1;
  white-space: nowrap; }
.cd .chip.solid {background: var(--bg-2); }
.cd .chip.amber {color: var(--brand-500); border-color: color-mix(in oklch, var(--brand-500) 30%, transparent); background: color-mix(in oklch, var(--brand-500) 8%, var(--bg-1)); }
.cd .chip.success {color: var(--success); border-color: color-mix(in oklch, var(--success) 30%, transparent); background: color-mix(in oklch, var(--success) 8%, var(--bg-1)); }
.cd .chip.warning {color: var(--warning); border-color: color-mix(in oklch, var(--warning) 30%, transparent); background: color-mix(in oklch, var(--warning) 8%, var(--bg-1)); }
.cd .chip.danger {color: var(--danger); border-color: color-mix(in oklch, var(--danger) 35%, transparent); background: color-mix(in oklch, var(--danger) 10%, var(--bg-1)); }
.cd .chip.info {color: var(--info); border-color: color-mix(in oklch, var(--info) 30%, transparent); background: color-mix(in oklch, var(--info) 8%, var(--bg-1)); }
.cd .gauge {display: flex;
  align-items: center;
  gap: 8px; }
.cd .gauge .bar {flex: 1;
  height: 4px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden; }
.cd .gauge .fill {height: 100%;
  background: var(--brand-500);
  border-radius: 999px; }
.cd .gauge .num {font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-primary); min-width: 32px; text-align: right; }
.cd .gauge.danger .fill {background: var(--danger); }
.cd .gauge.warning .fill {background: var(--warning); }
.cd .gauge.success .fill {background: var(--success); }

/* ── methodology sections (canon methodology.css) ── */
.cd .mt-hero {padding-top: var(--pub-hero-top); padding-bottom: var(--pub-hero-bottom); position: relative; overflow: hidden; }
.cd .mt-hero::before {content: ""; position: absolute; top: -30%; left: 40%; width: 900px; height: 900px; max-width: 90vw; background: radial-gradient(circle, color-mix(in oklch, var(--brand-500) 11%, transparent), transparent 62%); pointer-events: none; z-index: 0; }
.cd .mt-hero .uc-container {position: relative; z-index: 1; }
.cd .mt-principle {border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.cd .mt-principle .q {font-family: var(--font-serif); font-size: var(--pub-type-section); line-height: var(--pub-lh-snug); letter-spacing: -0.01em; color: var(--text-primary); text-wrap: balance; max-width: 22ch; }
.cd .mt-principle .q .am {color: var(--brand-500); }
.cd .mt-pipe {display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 40px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; background: var(--bg-1); }
.cd .mt-stage {position: relative; padding: var(--pub-card-pad); border-right: 1px solid var(--border-subtle); }
.cd .mt-stage:last-child {border-right: 0; }
.cd .mt-stage .n {font-family: var(--font-mono); font-size: var(--pub-type-meta); letter-spacing: 0.06em; color: var(--text-disabled); }
.cd .mt-stage .ic {width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; color: var(--brand-500); margin: 12px 0 14px; background: color-mix(in oklch, var(--brand-500) 6%, transparent); }
.cd .mt-stage h4 {font-size: var(--pub-type-body); font-weight: 560; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--text-primary); }
.cd .mt-stage p {font-size: var(--pub-type-meta); line-height: var(--pub-lh-meta); color: var(--text-secondary); margin: 0; }
.cd .mt-stage .tick {margin-top: 12px; font-family: var(--font-mono); font-size: var(--pub-type-meta); letter-spacing: 0.03em; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 5px; }
.cd .mt-stage .tick .d {width: 4px; height: 4px; border-radius: 50%; background: var(--success); }
.cd .mt-stage:not(:last-child)::after {content: ""; position: absolute; right: -7px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg); background: var(--bg-1); border-top: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); z-index: 2; }
.cd .mt-block {display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start; }
.cd .mt-block .lede h2 {font-family: var(--font-sans); font-weight: 560; font-size: var(--pub-type-section); letter-spacing: -0.02em; line-height: var(--pub-lh-snug); margin: 12px 0 0; }
.cd .mt-block .lede p {font-size: var(--pub-type-body); line-height: var(--pub-lh-body); color: var(--text-secondary); margin: 14px 0 0; text-wrap: pretty; }
.cd .mt-block.solo {grid-template-columns: 1fr; }
.cd .mt-regs {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; }
.cd .mt-reg {display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 16px; background: var(--bg-1); }
.cd .mt-reg .ic {color: var(--text-tertiary); }
.cd .mt-reg .nm {font-size: var(--pub-type-meta); color: var(--text-primary); }
.cd .mt-reg .gp {font-family: var(--font-mono); font-size: var(--pub-type-meta); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-disabled); margin-top: 1px; }
.cd .mt-reg .k {font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); }
.cd .mt-score {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pub-gap-grid); }
.cd .mt-score .card {min-width: 0; padding: var(--pub-card-pad); border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-1); }
.cd .mt-score .card .h {flex-wrap: wrap; display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.cd .mt-score .card .h .ic {color: var(--brand-500); }
.cd .mt-score .card .h .t {font-size: var(--pub-type-body); font-weight: 560; color: var(--text-primary); }
.cd .mt-score .card p {font-size: var(--pub-type-meta); line-height: var(--pub-lh-body); color: var(--text-secondary); margin: 0 0 12px; }
.cd .mt-hl {border: 1px solid var(--border-default); border-left: 3px solid var(--brand-500); border-radius: var(--r-sm); background: color-mix(in oklch, var(--brand-500) 5%, transparent); padding: var(--pub-card-pad); }
.cd .mt-hl.warn {border-left-color: var(--warning); background: color-mix(in oklch, var(--warning) 5%, transparent); }
.cd .mt-hl .k {font-family: var(--font-mono); font-size: var(--pub-type-meta); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; }
.cd .mt-hl .big {font-family: var(--font-serif); font-size: var(--pub-type-body); line-height: var(--pub-lh-meta); color: var(--text-primary); text-wrap: pretty; }
.cd .mt-hl .big b {color: var(--brand-500); font-weight: 600; }
.cd .mt-facts {display: flex; flex-wrap: wrap; gap: 10px; }
.cd .mt-fact {display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--bg-1); }
.cd .mt-fact .v {font-family: var(--font-mono); font-size: var(--pub-type-body); letter-spacing: -0.02em; color: var(--text-primary); }
.cd .mt-fact .l {font-size: var(--pub-type-meta); color: var(--text-tertiary); }
.cd .mt-std {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pub-gap-grid); }
.cd .mt-std .card {display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: var(--pub-card-pad); border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-1); }
.cd .mt-std .card .badge {width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; color: var(--brand-500); }
.cd .mt-std .card h4 {margin: 0 0 5px; font-size: var(--pub-type-body); font-weight: 560; color: var(--text-primary); }
.cd .mt-std .card .st {font-family: var(--font-mono); font-size: var(--pub-type-meta); text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-500); margin-bottom: 6px; }
.cd .mt-std .card p {margin: 0; font-size: var(--pub-type-meta); line-height: var(--pub-lh-meta); color: var(--text-secondary); }
@media (max-width: 1000px) {
  .cd .mt-pipe {grid-template-columns: 1fr 1fr; }
  .cd .mt-stage:not(:last-child)::after {display: none; }
  .cd .mt-block {grid-template-columns: 1fr; gap: 24px; }
  .cd .mt-score {grid-template-columns: 1fr; }
  .cd .mt-regs {grid-template-columns: 1fr; }
  .cd .mt-std {grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cd .mt-pipe {grid-template-columns: 1fr; }
}
.cd .home-receipt {border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: color-mix(in oklch, var(--bg-1) 70%, var(--bg-0)); overflow: hidden; }
.cd .home-receipt .rc-row {display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); border-left: 3px solid transparent; }
.cd .home-receipt .rc-row:last-child {border-bottom: 0; }
.cd .home-receipt .rc-row:hover {border-left-color: var(--brand-500); background: color-mix(in oklch, var(--brand-500) 4%, transparent); }
.cd .home-receipt .rc-src {display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.cd .home-receipt .rc-src .ok {width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.cd .home-receipt .rc-ref {font-size: var(--pub-type-meta); color: var(--text-primary); }
.cd .home-receipt .rc-url {font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd .home-receipt .rc-meta {text-align: right; font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-disabled); white-space: nowrap; }
/* P0B closure — the catalogue CTA on the Sources section. A stacked
   full-width card: label / title / description / action as normal-flow
   block elements, so nothing can collide, truncate or ellipsize at any
   viewport. Existing type tokens only — no new size, no nowrap. */
.cd .mt-catcta {display: block; margin-top: 20px; padding: 18px 20px; border: 1px solid var(--border-subtle); border-left: 3px solid transparent; border-radius: var(--r-md); background: color-mix(in oklch, var(--bg-1) 70%, var(--bg-0)); text-decoration: none; color: inherit; }
.cd .mt-catcta:hover {border-left-color: var(--brand-500); background: color-mix(in oklch, var(--brand-500) 4%, transparent); }
.cd .mt-catcta .k {font-family: var(--font-mono); font-size: var(--pub-type-meta); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); }
.cd .mt-catcta .t {font-size: var(--pub-type-body); color: var(--text-primary); margin-top: 8px; }
.cd .mt-catcta .d {font-size: var(--pub-type-meta); line-height: var(--pub-lh-body); color: var(--text-tertiary); margin-top: 4px; }
.cd .mt-catcta .go {font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--brand-500); margin-top: 12px; }
.cd .pr-fcra {display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px 18px; border: 1px solid var(--border-subtle); border-left: 3px solid var(--warning); border-radius: var(--r-sm); background: color-mix(in oklch, var(--bg-1) 60%, transparent); }
.cd .pr-fcra .ic {color: var(--warning); }
.cd .pr-fcra p {margin: 0; font-size: var(--pub-type-meta); line-height: var(--pub-lh-body); color: var(--text-tertiary); }
.cd .pr-fcra b {color: var(--text-secondary); font-weight: 560; }

/* Mobile: three sections use inline `1fr 1fr` grids in the markup (principle,
   the two highlight bands, limits); stack them at the canon's own 620px break. */
@media (max-width: 620px) {
  .cd .mt-principle .uc-container,
  .cd .mt-2band,
  .cd .g-limits { grid-template-columns: 1fr !important; }
  /* Narrow phones: the receipt's fixed 130px label + nowrap timestamp force
     the whole chapter past the viewport (min-content propagation, CLAUDE.md
     9.3). Restack: source | content on the first line, the meta wraps onto
     its own line under the content column. */
  .cd .home-receipt .rc-row { grid-template-columns: 84px minmax(0, 1fr); gap: 8px 10px; padding: 12px 14px; }
  .cd .home-receipt .rc-meta { grid-column: 2; text-align: left; white-space: normal; }
}