/* PowerPortals shared appearance contract. Color ownership lives here, never in a shell.
 * Layouts, typography, approved brand assets and domain behavior remain unchanged.
 * No JavaScript: device preference still works. Explicit choices override the device.
 */
:root {
  color-scheme: light;
  --pp-canvas: #f3f6f8;
  --pp-surface: #ffffff;
  --pp-raised: #ffffff;
  --pp-soft: #edf2f4;
  --pp-input: #f7f9fa;
  --pp-hover: #e6f0f3;
  --pp-rail: #e7eef2;
  --pp-text: #17323a;
  --pp-muted: #526870;
  --pp-line: #d5dfe4;
  --pp-control-border: #7c9099;
  --pp-accent: #0e6374;
  --pp-accent-hover: #084b59;
  --pp-button-bg: #176b7a;
  --pp-button-text: #ffffff;
  --pp-focus: #ae4e20;
  --pp-selection: #cce8ef;
  --pp-selection-text: #12313b;
  --pp-success: #1a6d3c;
  --pp-success-bg: #e8f5ed;
  --pp-warning: #805200;
  --pp-warning-bg: #fff4db;
  --pp-danger: #a12830;
  --pp-danger-bg: #fdecee;
  --pp-info: #185976;
  --pp-info-bg: #e8f3fa;
  --pp-shadow: 0 4px 18px rgb(15 37 45 / 8%);
  --pp-backdrop: rgb(8 18 26 / 55%);
  --pp-media-well: #e4ebee;
  --pp-brand-accent: #076ead;
  --pp-disabled: #657780;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --pp-canvas: #10161f;
  --pp-surface: #1b2530;
  --pp-raised: #23313e;
  --pp-soft: #222e3b;
  --pp-input: #141e29;
  --pp-hover: #2b3e4a;
  --pp-rail: #171f29;
  --pp-text: #e8f0f3;
  --pp-muted: #afc0c8;
  --pp-line: #3c4b59;
  --pp-control-border: #718795;
  --pp-accent: #8adbe5;
  --pp-accent-hover: #b4edf3;
  --pp-button-bg: #237280;
  --pp-button-text: #ffffff;
  --pp-focus: #f5af7e;
  --pp-selection: #315664;
  --pp-selection-text: #ffffff;
  --pp-success: #8ae0ad;
  --pp-success-bg: #143628;
  --pp-warning: #f3ce80;
  --pp-warning-bg: #3b2e16;
  --pp-danger: #ffa4ac;
  --pp-danger-bg: #452128;
  --pp-info: #9ddaf5;
  --pp-info-bg: #183444;
  --pp-shadow: 0 5px 22px rgb(0 0 0 / 24%);
  --pp-backdrop: rgb(0 0 0 / 70%);
  --pp-media-well: #0d141c;
  --pp-brand-accent: #77caff;
  --pp-disabled: #a2b3bd;
}
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --pp-canvas: #10161f;
  --pp-surface: #1b2530;
  --pp-raised: #23313e;
  --pp-soft: #222e3b;
  --pp-input: #141e29;
  --pp-hover: #2b3e4a;
  --pp-rail: #171f29;
  --pp-text: #e8f0f3;
  --pp-muted: #afc0c8;
  --pp-line: #3c4b59;
  --pp-control-border: #718795;
  --pp-accent: #8adbe5;
  --pp-accent-hover: #b4edf3;
  --pp-button-bg: #237280;
  --pp-button-text: #ffffff;
  --pp-focus: #f5af7e;
  --pp-selection: #315664;
  --pp-selection-text: #ffffff;
  --pp-success: #8ae0ad;
  --pp-success-bg: #143628;
  --pp-warning: #f3ce80;
  --pp-warning-bg: #3b2e16;
  --pp-danger: #ffa4ac;
  --pp-danger-bg: #452128;
  --pp-info: #9ddaf5;
  --pp-info-bg: #183444;
  --pp-shadow: 0 5px 22px rgb(0 0 0 / 24%);
  --pp-backdrop: rgb(0 0 0 / 70%);
  --pp-media-well: #0d141c;
  --pp-brand-accent: #77caff;
  --pp-disabled: #a2b3bd;
}

/* Compatibility names used by the existing ACP, People and forum modules. */
:root, html[data-theme] {
  --ink: var(--pp-text);
  --deep: var(--pp-button-bg);
  --rust: var(--pp-focus);
  --cream: var(--pp-soft);
  --paper: var(--pp-surface);
  --line: var(--pp-line);
  --teal: var(--pp-accent);
  --muted: var(--pp-muted);
  --shadow: var(--pp-shadow);
  --ui-canvas: var(--pp-canvas);
  --ui-chrome: var(--pp-surface);
  --ui-rail: var(--pp-rail);
  --ui-side: var(--pp-soft);
  --ui-panel: var(--pp-surface);
  --ui-panel-2: var(--pp-soft);
  --ui-border: var(--pp-line);
  --ui-border-strong: var(--pp-control-border);
  --ui-text: var(--pp-text);
  --ui-subtle: var(--pp-muted);
  --ui-muted: var(--pp-muted);
  --ui-accent: var(--pp-accent);
  --ui-accent-strong: var(--pp-button-bg);
  --ui-ok: var(--pp-success);
  --ui-warning: var(--pp-warning);
  --ui-danger: var(--pp-danger);
  --ui-shadow: var(--pp-shadow);
  --portal-bg: var(--pp-canvas);
  --portal-surface: var(--pp-surface);
  --portal-surface-2: var(--pp-soft);
  --portal-border: var(--pp-line);
  --portal-ink: var(--pp-text);
  --portal-muted: var(--pp-muted);
  --portal-accent: var(--pp-accent);
  --portal-accent-hover: var(--pp-accent-hover);
  --portal-soft-blue: var(--pp-info-bg);
  --portal-focus: var(--pp-focus);
  --portal-shadow: var(--pp-shadow);
}

html { background: var(--pp-canvas); color: var(--pp-text); accent-color: var(--pp-accent); }
::selection { background: var(--pp-selection); color: var(--pp-selection-text); }
:where(input, select, textarea, button, dialog) { color-scheme: inherit; }
:where(input,textarea)::placeholder { color: var(--pp-muted); opacity: 1; }
:where(input,select,textarea):disabled { color: var(--pp-disabled); background: var(--pp-soft); cursor: not-allowed; }
:where(input,select,textarea)[aria-invalid="true"] { border-color: var(--pp-danger); }
:where(input,textarea):autofill { box-shadow: 0 0 0 1000px var(--pp-input) inset; color: var(--pp-text); }
:where(input,textarea):-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--pp-input) inset; -webkit-text-fill-color: var(--pp-text); caret-color: var(--pp-text); }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid var(--pp-focus); outline-offset: 3px; }
:where(hr) { border-color: var(--pp-line); }
:where(dialog) { background: var(--pp-raised); color: var(--pp-text); border-color: var(--pp-line); }
:where(dialog)::backdrop { background: var(--pp-backdrop); }
/* Appearance selector is identical in both shells; it never submits a form. */
.pp-theme-menu { position: relative; flex: none; font: 13px/1.4 Inter, "Segoe UI", system-ui, sans-serif; color: var(--pp-text); }
.pp-theme-menu[hidden] { display: none; }
.pp-theme-menu > summary { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 10px; list-style: none; cursor: pointer; border: 1px solid var(--pp-control-border); border-radius: 8px; background: var(--pp-surface); color: var(--pp-text); }
.pp-theme-menu > summary::-webkit-details-marker { display: none; }
.pp-theme-menu > summary:hover { background: var(--pp-hover); }
.pp-theme-menu svg { width: 18px; height: 18px; flex: none; }
.pp-theme-menu > .pp-theme-popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 100; width: min(250px,calc(100vw - 32px)); padding: 16px; box-sizing: border-box; background: var(--pp-raised); color: var(--pp-text); border: 1px solid var(--pp-control-border); border-radius: 10px; box-shadow: var(--pp-shadow); white-space: normal; }
.pp-theme-popover label { display: grid; gap: 8px; font-weight: 600; color: var(--pp-text); font-size: 13px; }
.pp-theme-popover select { width: 100%; box-sizing: border-box; background: var(--pp-input); color: var(--pp-text); border: 1px solid var(--pp-control-border); border-radius: 6px; font: inherit; min-height: 44px; padding: 8px; }
.pp-theme-popover p { color: var(--pp-muted); font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.pp-theme-status { display: block; margin-top: 8px; font-weight: 600; font-size: 12px; color: var(--pp-accent); }
@media(max-width:600px) { .pp-theme-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .pp-theme-menu > summary { width:40px; padding:0; justify-content:center; } }
@media (prefers-reduced-motion: reduce) { .pp-theme-menu *, .pp-theme-menu { scroll-behavior: auto; transition: none; } }
@media (forced-colors: active) {
 .pp-theme-menu > summary, .pp-theme-menu > .pp-theme-popover, .pp-theme-popover select { background: Canvas; color: CanvasText; border-color: ButtonText; }
 .pp-theme-status { color: LinkText; }
}
@media print { html { color-scheme: light; } .pp-theme-menu { display: none; } }

/* Shell constraints are shared; narrow screens scroll navigation, not the whole page. */
body.admin > .top { position:relative; z-index:30; }
body.portal > .top { z-index:30; }
body.admin main { min-width:0; }
body.admin .rail, body.admin .sections { flex-shrink:0; }
@media(max-width:1000px) {
 body.admin > .top { flex-wrap:wrap; padding:12px 16px; gap:10px; }
 body.admin > .top .product { display:none; }
 body.admin > .top .search { order:4; flex-basis:100%; min-width:0; }
 body.admin > .top .search .find { width:100%; }
 body.admin > .top .view { margin-left:auto; }
 body.admin > .frame { display:block; }
 body.admin .frame > .rail { display:flex; flex-direction:row; width:100%; box-sizing:border-box; overflow-x:auto; }
 body.admin .frame > .rail a { flex:none; min-width:72px; }
 body.admin .frame > .sections { display:flex; align-items:center; width:100%; box-sizing:border-box; overflow-x:auto; }
 body.admin .frame > .sections > * { flex:none; }
 body.admin .frame > main { padding:16px; }
 body.portal > .top { grid-template-columns:1fr auto; grid-template-areas:"brand account" "nav nav" "search search"; }
 body.portal > .top .brand { grid-area:brand; }
 body.portal > .top .account { grid-area:account; }
 body.portal > .top nav { grid-area:nav; flex-wrap:wrap; }
 body.portal > .top .search { grid-area:search; }
}
@media(max-width:600px) {
 body.portal > .top { display:flex; flex-wrap:wrap; padding:12px 16px; gap:12px; }
 body.portal > .top nav, body.portal > .top .search { flex-basis:100%; order:3; }
 body.portal > .top .account { margin-left:auto; }
 body.portal > .top .account .who { max-width:110px; overflow:hidden; text-overflow:ellipsis; }
 body.portal > .top .account form button { padding:0 5px; font-size:12px; }
}

.pill.error,.pill.danger{background:var(--pp-danger-bg);color:var(--pp-danger)}
.pill.info{background:var(--pp-info-bg);color:var(--pp-info)}
/* Controls retain a visible boundary in both schemes; decorative dividers stay subtle. */
body.admin input:not([type=checkbox]):not([type=range]):not([type=color]),body.admin select,body.admin textarea,
body.portal input:not([type=checkbox]):not([type=range]):not([type=color]),body.portal select,body.portal textarea{border-color:var(--pp-control-border)}

/* ACP semantic compatibility names; all resolve to the shared palette. */
:root, html[data-theme] {
  --pp-bg:var(--pp-canvas);
  --pp-surface-alt:var(--pp-soft);
  --pp-surface-subtle:var(--pp-soft);
  --pp-surface-muted:var(--pp-soft);
  --pp-note-bg:var(--pp-soft);
  --pp-text-strong:var(--pp-text);
  --pp-text-secondary:var(--pp-muted);
  --pp-text-muted:var(--pp-muted);
  --pp-border:var(--pp-line);
  --pp-border-soft:var(--pp-line);
  --pp-border-control:var(--pp-control-border);
  --pp-link:var(--pp-accent);
  --pp-link-hover:var(--pp-accent-hover);
  --pp-accent-solid:var(--pp-button-bg);
  --pp-accent-bg:var(--pp-hover);
  --pp-accent-border:var(--pp-line);
  --pp-on-accent:var(--pp-button-text);
  --pp-action:var(--pp-button-bg);
  --pp-action-hover:var(--pp-accent-hover);
  --pp-rail-bg:var(--pp-rail);
  --pp-rail-text:var(--pp-text);
  --pp-banner-bg:var(--pp-info-bg);
  --pp-banner-border:var(--pp-line);
  --pp-success-text:var(--pp-success);
  --pp-warning-text:var(--pp-warning);
  --pp-warning-border:var(--pp-line);
  --pp-popover-shadow:var(--pp-shadow);
}