/* The app shell on WordPress screens (D46): glue between the approved kit (kit/core.css) and the BuddyX Pro, BuddyPress
   and Tutor LMS markup inside it. Values only from the kit's tokens. Logical properties throughout. */

/* The estate token layer reads the kit's tokens, so every estate and plugin screen inside the shell is in the kit. */
:root[data-net][data-net][data-net] {
  --es-canvas: var(--paper); --es-surface: var(--paper); --es-raised: var(--surface); --es-muted: var(--surface); --es-hover: var(--surface-2);
  --es-ink: var(--ink); --es-ink-2: var(--ink-2); --es-ink-3: var(--ink-3); --es-line: var(--line); --es-line-strong: var(--line-2);
  --es-primary: var(--ink); --es-primary-ink: var(--paper); --es-primary-hover: var(--ink-2);
  --es-accent: var(--acc); --es-accent-soft: var(--acc-tint); --es-rule: var(--acc);
  --es-series-1: var(--acc); --es-series-2: var(--acc-2); --es-series-3: var(--acc-3); --es-series-4: var(--ink-3);
  --es-focus: var(--acc); --es-font: var(--font); --es-font-head: var(--font); --es-font-mono: var(--font-mono);
  --es-radius: var(--r); --es-radius-button: var(--r);
}

/* The parent's page wrapper sits inside the kit's page; it adds no frame of its own. */
.pf-shell #page.site { background: transparent; min-height: 0; }
.pf-shell .site-content, .pf-shell .site-wrapper { background: transparent; }
.pf-shell .pf-shell-page { padding-block-start: var(--s6); }
.pf-shell .site-sub-header, .pf-shell .buddyx-sub-header { background: transparent; border: 0; padding-inline: 0; }
.pf-shell .site-sub-header .container, .pf-shell .site-content > .container, .pf-shell .container { max-width: none; padding-inline: 0; width: auto; }
.pf-shell .site-sub-header :where(h1, .entry-title, .page-title) { font-size: var(--t-3xl, 36px); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.pf-shell :where(.site-sub-header .buddyx-breadcrumbs, .site-sub-header .breadcrumbs) { font-size: var(--t-sm, 14px); color: var(--ink-2); }

/* One appearance control (the kit's): BuddyX Pro's floating switch is not shown. */
.pf-shell .bx-color-mode-toggle { display: none !important; }

/* Sidebars of the parent give way to the kit's single working canvas. */
.pf-shell #secondary.widget-area:empty { display: none; }

/* The phone tab bar never covers the end of the page. */
@media (max-width: 760px) {
  .pf-shell .app { padding-block-end: var(--tabbar-h, 64px); }
}

/* Class names WordPress shares with the kit: the body's "page" class (pages) and an inner "app" region (the member
   app) must not take the kit's page and app layouts. */
body.pf-shell.page { max-width: none; margin: 0; padding: 0; }
.app .app { display: block; min-height: 0; }

/* The kit's icon sizes win over the parent's and plugins' generic svg and button rules. */
.app :is(.hd, .rail, .tabbar, .ftr, .pop, .palette) .ico { width: 20px; height: 20px; flex: none; max-width: none; }
.app :is(.hd, .rail, .tabbar, .ftr, .pop, .palette) .ico.ico-sm { width: 16px; height: 16px; }

/* Phone: the bar never runs past the screen; the scope chip gives way first, then the WordPress toolbar's name.
   The avatar button sits a few pixels past the bar edge by design; the app clips it (clip keeps sticky parts working). */
.app { overflow-x: clip; }
.app .hd .bar { min-width: 0; }
.app .hd .scope { min-width: 0; flex-shrink: 1; }
.app .hd .scope .crumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .app .hd .scope { max-width: 26vw; }
  .app .hd .bar > .sp { flex: 1 1 0; width: 0; }
  .app .hd .sp { min-width: 0; }
  html #wpadminbar { overflow: hidden; }
}