body .sb-blk.sb-data .dark{background:var(--pb-ink);color:var(--pb-on-dark)}
/* DAT-20: the design's photo carries height="960" and the generated CSS can't cancel it, so it renders 960px tall; match it. */
body .sb-data .folio-top figure img{height:960px}

/* Only configured recommendations override the historical second-column treatment. */
body .sb-data .cc-recommended th, body .sb-data .cc-recommended td { background: transparent; border-left: 0; border-right: 0; }
body .sb-data .focus-matrix .cc-recommended thead th:not(:first-child) { font-size: var(--st-type-h3) !important; }
body .sb-data .cc-recommended .is-recommended { background: var(--pb-surface); border-inline: var(--st-line-w) solid var(--pb-primary); }
body .sb-data .cc-recommended thead th.is-recommended { border-top: 3px solid var(--pb-primary); font-size: var(--st-type-h2) !important; }


/* Branding Sizes: role overrides kept outside the generated category CSS. */
body .sb-data .stat h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-data .quartet .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .lead-number .primary .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .lead-number .secondary .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .photo-count .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .inverted .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .ledger .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .columns-chart .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .rings .stat .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .progress-list .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .billboard .primary .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .billboard .grid3 .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .segments .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .panorama-facts .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .constellation .stat .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .rail-layout .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .word-led .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .word-led .stat h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-data .photo-field .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .spine-layout .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .receipt .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .ribbons .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .lead-cells dd { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-data .rings .value { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
/* 3.6.10: 10 with one group of rows shows one full-width table (half the band stayed empty). */
body:not(.cc-look-pre-3-6-10) .sb-data .paired-tables:has(> table:only-child) { grid-template-columns: 1fr; }
/* 3.6.10: DAT-20's folio photo is a landscape picture beside the intro; a global image height stretched it into a tall
   strip that left the intro column mostly empty. */
body:not(.cc-look-pre-3-6-10) .sb-data .folio-top figure { align-self: start; }
body:not(.cc-look-pre-3-6-10) .sb-data .folio-top figure img { height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; }

/* 3.6.10: looks drawn as a dark band (.dark) sit on the row's Background, which paints the band. On a light row their
   words, rules, buttons and links follow the row (dark text), not white (DAT-11 printed white on white). On a
   Secondary row they follow that color's lightness; Main, Black and photo rows keep the white design. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-data:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark { --pb-on-dark: var(--pb-text); --pb-muted-on-dark: var(--color-muted); --pb-muted: var(--color-muted); --pb-border: var(--color-line); --pb-rule-on-dark: var(--color-line); color: var(--pb-text); }
body:not(.cc-look-pre-3-6-10) .bg-sec .sb-blk.sb-blk.sb-data:not(.sb-edge):not(.sb-dark) > .dark { --pb-on-dark: oklch(from var(--color-sec) clamp(0, (0.62 - l) * 1000, 1) 0 0); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-data:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .btn:not(.ghost) { background: var(--btn-fill); color: var(--btn-color) !important; border-color: var(--btn-border); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-data:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .btn:not(.ghost):hover { background: var(--btn-fill-hover); color: var(--btn-color-hover) !important; border-color: var(--btn-border-hover); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-data:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .btn.ghost { background: transparent; color: var(--btn-outline) !important; border-color: var(--btn-outline); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-data:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .tlink { color: var(--color-link); }