/* Shared surface fill. Images, text and icons never inherit opacity. */
:root[data-theme="black"],[data-theme="black"]{
 --theme-name:"Jet Black";color-scheme:dark;--bg:#000000;--panel:#000000;--chrome:#000000;
 --text:#f1f3f5;--muted:#a7afb6;--ink:#f1f3f5;--ink2:#d5dce2;--ink3:#acb5bd;--ink4:#8e9aa4;
 --edge:#2b2e33;--sel:#181b20;--inset:#08090b;--c-panel:#08090b;
}
:root[data-skin="active"]{--accent:var(--skin-accent);--on-accent:var(--skin-on-accent);--c-panel:var(--skin-surface-fill)}
:root[data-skin="active"] .house-shell{background:var(--skin-base-fill);--accent:var(--skin-accent);--on-accent:var(--skin-on-accent)}
/* The tokens made from the accent are made again inside the shell, from the shell's accent (the skin's, above). The
   root works them out from Settings' accent dot (tokens-themes.css :root[data-theme][data-accent] outranks a skin
   there), so inside the shell --control-fill, --control-selected, --accent-soft, --accent-line and --glow wore the dot's
   colour beside the skin's: gold in Day, root beer in Night (Mark, October 21, 2026: "isee this in random place same in
   dark mode its a root beer color and does not match the menu ... a token mismatch root that out"). Outside the shell
   the root keeps the dot's accent with its own pairs, which its pages' words are measured against. */
:root[data-skin="active"] .house-shell{
 --accent-soft:color-mix(in srgb,var(--accent) 14%,transparent);--accent-line:color-mix(in srgb,var(--accent) 45%,transparent);
 --glow:color-mix(in srgb,var(--accent) 11%,transparent);
 --control-fill:color-mix(in srgb,var(--panel) 88%,var(--accent) 12%);--control-selected:color-mix(in srgb,var(--panel) 78%,var(--accent) 22%)}
:root[data-skin="active"] .house-shell :is(.house,.house-main){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-skin="active"] .house-shell .house-wall{opacity:var(--skin-image-opacity);filter:brightness(var(--wall-light))}
:root[data-skin="active"] .house-shell .house-wall :is(img,video){filter:none}
/* These are the surface owners. Their inner sections stay transparent, avoiding
   a second solid layer under a translucent card. Focus and selection survive. */
:root[data-skin="active"] .house-shell :is(.house-stage,.house-banner,.house-left,.house-right,.house-rail,.house-canvas-bar,.house-canvas-header,.house-canvas-pill,.house-tabs,.house-me,.customer-person,.customer-demo-equipment,.apt-feed-card,.apt-cmp,.af-composer-closed,.cb-item,.pexels-photo,.cp-card,.cp-table,[data-art-surface]){
 background:var(--skin-surface-fill);backdrop-filter:var(--sheet-backdrop,none);-webkit-backdrop-filter:var(--sheet-backdrop,none);
 --text:var(--skin-card-ink);--ink:var(--skin-card-ink);--ink2:var(--skin-card-ink);--muted:var(--skin-card-muted);--ink3:var(--skin-card-muted);--ink4:var(--skin-card-muted);--ink-1:var(--skin-card-ink);--ink-2:var(--skin-card-ink);--ink-3:var(--skin-card-muted);--ink-4:var(--skin-card-muted);color:var(--skin-card-ink);
 border-color:color-mix(in srgb,var(--skin-card-muted) var(--glass-rim,23%),transparent);transition-property:border-color,box-shadow,transform;
}
/* A tab track is the skin's surface with at least a third of the panel color in it, so it still shows where the panels are
   fully see-through (Mark, October 26, 2026: the tabs floated on the panel). panel-tab-track-browser-check. */
:root[data-skin="active"] .house-shell .house-tabs{background:color-mix(in srgb,var(--skin-surface-fill) 65%,var(--panel))}
:root[data-skin="active"] .house-shell .pp.cp-page :is(.cp-card,.pp-detail.cp-panel){background:var(--skin-surface-fill);backdrop-filter:var(--sheet-backdrop,none);color:var(--skin-card-ink);border-color:color-mix(in srgb,var(--skin-card-muted) var(--glass-rim,23%),transparent)}
:root[data-skin="active"] .house-shell .pp.cp-page .cp-card:is(:hover,.is-hover,.is-pressed,.open){border-color:var(--accent)}
:root[data-skin="active"] .house-shell .cp-page{--accent:var(--skin-accent);--accent-rgb:var(--skin-accent-rgb);--on-accent:var(--skin-on-accent);--accent-ink:color-mix(in srgb,var(--skin-accent) 70%,var(--text))}
/* Accent as words and icons (Phase 12; Mark's test, October 13, 2026: "Night mode: some grey button text is faint"). The
   accent is chosen as a fill: the default blue, #247faf, read 2.9 to 4 to 1 as the words of a selected tab, menu row or
   source tab on Night's and Jet Black's dark surfaces. --accent-text is the accent for words and icons: in Day the accent
   itself; in Night and Jet Black the same hue lifted to OKLCH lightness 0.8 or more (the accent mixed with the text colour
   where a browser has no relative colours), 4.5 to 1 or better on those surfaces. It is declared where an accent is, so
   each place's own accent is the one lifted. A business's primary words in Contacts (--accent-ink) read it too. */
:root,.house-shell,.cp-page{--accent-text:var(--accent);}
:root:is([data-theme="night"],[data-theme="black"]),:root:is([data-theme="night"],[data-theme="black"]) :is(.house-shell,.cp-page){--accent-text:color-mix(in srgb,var(--accent) 45%,var(--text));}
@supports (color:oklch(from red max(l,.8) c h)){:root:is([data-theme="night"],[data-theme="black"]),:root:is([data-theme="night"],[data-theme="black"]) :is(.house-shell,.cp-page){--accent-text:oklch(from var(--accent) max(l,.8) c h);}}
:root[data-skin="active"]:is([data-theme="night"],[data-theme="black"]) .house-shell .cp-page{--accent-ink:var(--accent-text);}
/* The other selected words that wear the accent on these pages, Night and Jet Black only: Apps & More's category tabs
   (discover-preview.css), the Clipboard's tabs (canvas.css) and the On and Off segments (.pkg-seg, account.css) that
   Your listing and Settings share. The unread count on the header's bell and a chosen chip (.chip-on, components.css:
   Your listing's Quotes, Suppliers and the rest) sit on an accent fill, where neither dark nor white words reach 4.5
   to 1 on the mid blue: there the fill is the accent deepened, with white words. A button in an empty state's muted
   words (Directory's "Your listing", Contacts' Clear search) took that muted colour as its own; it reads the page's
   ink there. */
:root:is([data-theme="night"],[data-theme="black"]) :is(.ds-categories .house-tab.on,.house-right .cb-tabs button[aria-pressed="true"],.pkg-seg button[aria-pressed="true"]){color:var(--accent-text);}
:root:is([data-theme="night"],[data-theme="black"]) :is(.header-scene [data-scene-unread],.chip-on){background:color-mix(in oklab,var(--accent) 65%,#000);color:#fff;}
:root:is([data-theme="night"],[data-theme="black"]) .chip-on{border-color:color-mix(in oklab,var(--accent) 65%,#000);}
:root:is([data-theme="night"],[data-theme="black"]) .cp-page .cp-empty .cp-btn:not(.primary,.solid,.danger,.ghost){color:var(--ink);}
:root[data-skin="active"] .house-shell :is(.cb-open,.cb-symbol,.cb-open>span:last-child,.cb-open img,.cp-card .cp-bot,.cp-card .cp-top,.apt-feed-card .apt-post-body,.apt-feed-card .apt-post-actions){background:transparent}


/* Cards paint independently above the shell glass sheet. */
:root[data-skin="active"] .house-shell :is(.customer-person,.customer-demo-equipment,.apt-feed-card,.apt-cmp,.af-composer-closed,.cb-item,.pexels-photo,.cp-card,.cp-table),:root[data-skin="active"] .house-shell .pp.cp-page :is(.cp-card,.pp-detail.cp-panel){background:var(--container-fill);backdrop-filter:blur(var(--container-blur));-webkit-backdrop-filter:blur(var(--container-blur));--skin-card-ink:var(--container-ink);--skin-card-muted:var(--container-muted)}
/* Shared card material. New components opt in with data-appearance-surface="container".
   Legacy owners are listed explicitly; never paint document paper, media or event cells. */
:root[data-skin="active"] :is(
 .house-shell [data-appearance-surface="container"],
 .house-shell .house-ann-ask,
 .house-shell .house-ann-btn,.house-shell .house-ann-clear,.house-shell .house-ann-live,
 .house-shell .house-ann-gear,.house-shell .house-ann-speech .chat-attach,
 .house-shell .titan-round-go,
 .house-shell .pw-foundation,.house-shell .pw-card,.house-shell .mk-bar,
 .house-shell .sb-stat,.house-shell .sb-panel,.house-shell .sb-work,
 .house-shell .sb-board [data-sale],.house-shell .pipeline-module .sb-table,
 .house-shell .cal-grid-frame,.house-shell .calendar-module [data-todo-list],
 .house-shell .ep-tile,.house-shell .ep-list,.house-shell .ep-table,.house-shell .ep-panel,
 .house-shell .gal:not(.is-black) .gal-card,
 .house-shell .titan-card,.house-shell .titan-project-card,.house-shell .studio-project-card,
 .house-shell .studio-preset,.house-shell .studio-text-preset,
 .house-shell .studio-library-categories>button,.house-shell .studio-library-categories>.studio-setup-tool,
 .house-shell .ws-item,.house-shell .ws-preview,.house-shell .acct-card,
 .house-shell .bug-count,.house-shell .bug-form
){
 background:var(--container-fill);
 backdrop-filter:blur(var(--container-blur));
 -webkit-backdrop-filter:blur(var(--container-blur));
 --skin-card-ink:var(--container-ink);--skin-card-muted:var(--container-muted);
 --text:var(--container-ink);--ink:var(--container-ink);--ink2:var(--container-ink);
 --ink-1:var(--container-ink);--ink-2:var(--container-ink);
 --muted:var(--container-muted);--ink3:var(--container-muted);--ink4:var(--container-muted);
 --ink-3:var(--container-muted);--ink-4:var(--container-muted);
 --a-ink:var(--container-ink);--a-ink2:var(--container-ink);--a-ink3:var(--container-muted);
 color:var(--container-ink);
}
/* The glass rim: the panels', cards' and page head's edge is the glass ink at --glass-rim, 23% in Day. In Night and Jet
   Black the light ink at 23% drew a light line around every pane, so there the rim is a hairline just above what is
   behind it. The page head (page-head.css) wears this card glass, so it wears the glass rim too, never the theme's solid
   --edge, one fixed gray over a see-through pane. page-heads-browser-check. */
:root[data-skin="active"]:is([data-theme="night"],[data-theme="black"]){--glass-rim:7%}
:root[data-skin="active"]:is([data-theme="night"],[data-theme="black"]) .house-shell .page-head{border-color:color-mix(in srgb,var(--skin-card-muted) var(--glass-rim,23%),transparent)}
/* Folder tabs belong to the same material; category colors remain on their icons. */
:root[data-skin="active"] .house-shell .ws-item{--ws-bg:var(--container-fill)}
/* Preserve selection feedback without replacing the user's card fill. */
:root[data-skin="active"] .house-shell :is(.pw-card:hover,.mk-bar:hover,.studio-project-card:hover,.studio-project-card.on){border-color:var(--accent)}

/* Layout wrappers never add a second opacity layer over the sidebar glass. */
:root[data-skin="active"] .house-shell :is(.pexels-panel,.studio-media-tools,.studio-asset-tabs,.studio-app-tabs){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Dialogs are solid work surfaces, independent of sheet/card opacity. */
:root[data-skin="active"] :is(dialog[open],.pp-dialog){background:var(--dialog-fill);backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;color:var(--dialog-ink);--text:var(--dialog-ink);--muted:var(--dialog-muted)}