/* Shared site-owned Light/Dark palette. Layout, content and native routes are unchanged. */
html[data-dp-site-skin] {
  --dp-ref-canvas: #2b333e;
  --dp-ref-canvas-top: #333e49;
  --dp-ref-rail: #222c37;
  --dp-ref-text: #f1f4fa;
  --dp-ref-muted: #d0d9e6;
  --dp-ref-link: #bed3ff;
  --dp-ref-line: #536175;
  --dp-ref-row: #35414e;
  --dp-ref-row-alt: #3a4653;
  --dp-ref-strip: #333e49;
  --dp-ref-selected: #355078;
  --dp-home-hover: #43536b;
  --dp-compact-surface: var(--dp-ref-row);
  --dp-compact-alt: var(--dp-ref-row-alt);
  --dp-compact-line: var(--dp-ref-line);
  --dp-compact-text: var(--dp-ref-text);
  --dp-compact-muted: var(--dp-ref-muted);
  --dp-compact-link: var(--dp-ref-link);
  --dp-compact-hover: var(--dp-home-hover);
  --dp-list-heading: var(--dp-ref-text);
  --dp-home-line: var(--dp-ref-line);
  color-scheme: dark;
}
html[data-dp-site-skin="light"] {
  --dp-ref-canvas: #edf1f7;
  --dp-ref-canvas-top: #e2e9f4;
  --dp-ref-rail: #e3eaf4;
  --dp-ref-text: #23334c;
  --dp-ref-muted: #465873;
  --dp-ref-link: #244e9b;
  --dp-ref-line: #b5c1d2;
  --dp-ref-row: #e3e9f2;
  --dp-ref-row-alt: #dce4ef;
  --dp-ref-strip: #e0e7f2;
  --dp-ref-selected: #c6d7f1;
  --dp-home-hover: #cddaf0;
  color-scheme: light;
}
html[data-dp-site-skin], html[data-dp-site-skin] body { background: var(--dp-ref-canvas); color: var(--dp-ref-text); }
html[data-dp-site-skin] .p-pageWrapper {
  background: radial-gradient(ellipse at 50% 0, var(--dp-ref-canvas-top), var(--dp-ref-canvas) 75%);
  color: var(--dp-ref-text);
}
html[data-dp-site-skin] :is(.p-body,.p-body-inner,.uix_mainContainer,.uix_mainWrapper,.uix_wrapper) { background: transparent; }
html[data-dp-site-skin] .p-nav,
html[data-dp-site-skin] .p-nav.dp-compact-header,
html[data-dp-site-skin] .p-navSticky.is-sticky .p-nav { background: linear-gradient(110deg,#4467c5,#4b70cd); color: #fff; }
html[data-dp-site-skin] .p-nav :is(.p-navgroup-link,.p-nav-menuTrigger,.p-nav-opposite a) { color: #fff; }
html[data-dp-site-skin] .p-staffBar { background: #3c539f; color: #fff; }
html[data-dp-site-skin] .p-staffBar a { color: #fff; }
html[data-dp-site-skin] .p-nav .uix_searchInput { background: #344255; color: #f5f7fb; border-color: #8ea9e8; }
html[data-dp-site-skin] .p-nav .uix_searchInput::placeholder { color: #e0e6f2; opacity: 1; }
html[data-dp-site-skin] :is(.dp-portal-shortcuts,.dp-home-paths) { background: var(--dp-ref-strip); border-color: var(--dp-ref-line); }
html[data-dp-site-skin] .dp-home-path { background: transparent; border-color: var(--dp-ref-line); color: var(--dp-ref-text); }
html[data-dp-site-skin] .p-body > .uix_sidebarNav { background: var(--dp-ref-rail); border-inline-end-color: var(--dp-ref-line); }
html[data-dp-site-skin] .uix_sidebarNav :is(.uix_sidebarNav__inner,.uix_sidebar--scroller) { background: transparent; }
html[data-dp-site-skin] :is(.uix_sidebarNav,.offCanvasMenu) :is(.p-navEl-link,.p-navEl-splitTrigger,.dp-native-navtoggle,.menu-linkRow,.dp-tree-toggle,.offCanvasMenu-link) { color: var(--dp-ref-text); }
html[data-dp-site-skin] .uix_sidebarNav .p-navEl.is-selected > .p-navEl__inner { background: var(--dp-ref-selected); }
html[data-dp-site-skin] .uix_sidebarNav .p-navEl.is-selected .p-navEl-link { color: var(--dp-ref-link); }
html[data-dp-site-skin] :is(.offCanvasMenu-content,.offCanvasMenu-header,.offCanvasMenu-subHeader) { background: var(--dp-ref-rail); color: var(--dp-ref-text); border-color: var(--dp-ref-line); }

/* Native panels and interaction surfaces share the custom portal palette. */
html[data-dp-site-skin] :is(.block-container:not(:has(.dp-list-row)):not(:has(.dp-media-catalogue)),.blockMessage:not(.blockMessage--error):not(.blockMessage--important):not(.dp-compact-action),.menu-content,.overlay,.tooltip-content,.message,.ctSurface,.ctOutline details) { background-color: var(--dp-ref-row); color: var(--dp-ref-text); border-color: var(--dp-ref-line); }
html[data-dp-site-skin] :is(.block-header,.block-minorHeader,.block-textHeader,.p-title-value,.menu-header,.overlay-title,.tooltip-title) { color: var(--dp-ref-text); border-color: var(--dp-ref-line); }
html[data-dp-site-skin] :is(.block-header,.menu-header,.menu-tabHeader,.overlay-title,.block-tabHeader,.block-minorTabHeader) { background-color: var(--dp-ref-row-alt); }
html[data-dp-site-skin] :is(.block-footer,.block-filterBar,.block-row--alt,.formRow>dt,.formSubmitRow-bar,.menu-footer,.message-cell--user,.message-user,.message-cell--vote,.bbCodeBlock,.bbCodeBlock-title,.bbCodeInline) { background-color: var(--dp-ref-row-alt); color: var(--dp-ref-text); border-color: var(--dp-ref-line); }
html[data-dp-site-skin] :is(.block-row,.formRow,.structItem,.contentRow,.menu-row,.message-attribution,.message-actionBar,.message-signature,.ctOutline li) { border-color: var(--dp-ref-line); }
html[data-dp-site-skin] :is(.structItem-minor,.contentRow-minor,.message-attribution,.u-muted,.ctMuted,.ctEyebrow,.ctType,.formRow-explain,.formRow-hint) { color: var(--dp-ref-muted); }
html[data-dp-site-skin] .p-body-content .dp-list-row :is(.dp-list-excerpt,.dp-list-activity,.structItem-minor) { color: var(--dp-ref-muted); }
html[data-dp-site-skin] :is(.p-body-header,.block-container,.blockMessage,.menu-content,.overlay,.ctWorkspace) a:not(.button):not(.label):not(.avatar):not(.dp-compact-banner):not(.dp-home-primary) { color: var(--dp-ref-link); }
html[data-dp-site-skin] :is(.menu-linkRow,.blockLink,.tabs-tab,.pageNav-page,.pageNav-jump) { color: var(--dp-ref-link); border-color: var(--dp-ref-line); }
html[data-dp-site-skin] :is(.menu-linkRow,.blockLink,.tabs-tab):is(:hover,.is-selected,.is-active) { background-color: var(--dp-home-hover); color: var(--dp-ref-link); }
html[data-dp-site-skin] :is(.input,.inputGroup-text,.tagify) { background-color: var(--dp-ref-row-alt); color: var(--dp-ref-text); border-color: var(--dp-ref-line); --input-border-heavy: var(--dp-ref-line); --input-border-light: var(--dp-ref-line); }
html[data-dp-site-skin] .input:focus { background-color: var(--dp-ref-row); border-color: var(--dp-ref-link); --input-border-heavy: var(--dp-ref-link); --input-border-light: var(--dp-ref-link); }
html[data-dp-site-skin] .input::placeholder { color: var(--dp-ref-muted); opacity: 1; }
html[data-dp-site-skin] .input[disabled] { color: var(--dp-ref-muted); }
html[data-dp-site-skin] .button:where(:not(.button--primary):not(.button--cta):not(.p-nav-menuTrigger)) { background-color: var(--dp-ref-row-alt); color: var(--dp-ref-link); border-color: var(--dp-ref-line); }
html[data-dp-site-skin] .button.button--primary { background-color: #4463b3; border-color: #7595ed; color: #fff; }
html[data-dp-site-skin] .button.button--primary:hover { background-color: #38579f; }
html[data-dp-site-skin] :is(.label--orange,.label.label--orange) { background: #f1c859; border-color: #dfb54a; color: #253043; }
html[data-dp-site-skin] .ctWorkspace { color: var(--dp-ref-text); }
html[data-dp-site-skin] :is(.ctOutline .is-current a,.ctOutline a:hover) { color: var(--dp-ref-link); }
html[data-dp-site-skin] .ctSurface progress { accent-color: var(--dp-ref-link); }
html[data-dp-site-skin] .fr-box.fr-basic :is(.fr-toolbar,.fr-wrapper,.fr-element,.fr-second-toolbar) { background: var(--dp-ref-row); color: var(--dp-ref-text); border-color: var(--dp-ref-line); }
html[data-dp-site-skin] :is(.fr-toolbar,.fr-popup) .fr-command.fr-btn { color: var(--dp-ref-text); }
html[data-dp-site-skin] :is(.fr-toolbar,.fr-popup) .fr-command.fr-btn svg path { fill: var(--dp-ref-text); }
html[data-dp-site-skin] :is(.p-footer,.p-footer-inner,.p-footer-custom,.p-footer-copyright,.p-footer-copyrightRow) { background: transparent; color: var(--dp-ref-muted); }
html[data-dp-site-skin] .p-footer a { color: var(--dp-ref-link); }

/* Matching 300x143px tiles add about 23px to the desktop support column. */
html[data-dp-site-skin][data-template="forum_list"] .dp-learning-carousel .dp-learning-art,
html[data-dp-site-skin][data-template="forum_list"] .dp-learning-carousel .dp-learning-art > .xfmgThumbnail { aspect-ratio: 21 / 10; }
/* Login has a native edge-to-edge shell; its negative panel gutters must not add width. */
html[data-dp-site-skin][data-template="login"] .p-body-pageContent .block-container { margin-inline: 0; }