/* The app shell's chrome: client_code/main/root_layout_html.
 *
 * Four rules of the format shape this file:
 *   1. a slot is an <anvil-slot> element inside the mount div and carries no
 *      [anvil-slot="content"] ATTRIBUTE, so the slot selectors name the mount
 *      class .root-content-mount;
 *   2. the two inline style= sets on the mount divs are the .root-nav-mount and
 *      .root-content-mount rules below;
 *   3. nothing is :where()-scoped. .root-layout, .root-sidebar, .root-content,
 *      .root-overlay, .root-burger and .px-menu-landing are the shell's public
 *      surface, read by the rail, by theme.css and by screens, so every rule
 *      here is bare;
 *   4. no .themed-scrollbar rule: the dependency owns that class and declares
 *      only scrollbar properties, disjoint from the mount's.
 *
 * --sidebar-width stays on .root-layout, the element theme.css reads it from.
 * No designer gate: nothing here is hidden until JavaScript runs.
 *
 * The slot's dropzone is display: contents, so a screen root is still the flex
 * item of .root-content-mount. No rule here uses a child combinator from the
 * mount to a screen root, because it would not reach through the dropzone.
 */
.root-layout {
  --sidebar-width: 250px;
  display: flex;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--px-bg-deep, #0f172a);
  color: var(--px-text-primary, #f8fafc);
  font-family: var(--px-font, 'Inter', sans-serif);
}
.root-sidebar {
  width: var(--sidebar-width, 250px);
  height: 100%;
  background-color: var(--px-bg-card, #1e293b);
  border-right: 1px solid var(--px-border, #334155);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.root-content {
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.root-burger {
  display: none;
}
.root-layout.px-modal-open .root-content .root-content-mount {
  overflow: hidden !important;
}
/* Was style="height: 100%; display: flex; flex-direction: column;" on the
   navigation slot div. */
.root-nav-mount {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Was style="height: 100%; display: flex; flex-direction: column; overflow: auto;"
   on the content slot div. */
.root-content-mount {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
/* Full-screen menu landing. The nav menu component adds and removes
   px-menu-landing (main is a layout-consumer and has no call_js of its
   own). The sidebar becomes the whole page and the content column is
   hidden, so load_screen leaves this state BEFORE it builds a screen —
   a screen built against a display:none column measures zero. */
.root-layout.px-menu-landing .root-sidebar {
  width: 100%;
  border-right: none;
}
.root-layout.px-menu-landing .root-content {
  display: none;
}
/* Mobile overrides */
@media (max-width: 768px) {
  .root-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
  }
  .root-sidebar.open {
    transform: translateX(0);
  }
  /* The menu IS the page here, so the off-canvas drawer has nothing to
     open; it comes back the moment landing ends. The burger needs no
     rule of its own — it lives inside .root-content, which is hidden
     above. */
  .root-layout.px-menu-landing .root-sidebar {
    position: relative;
    transform: none;
  }
  .root-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 90;
  }
  .root-sidebar.open ~ .root-overlay {
    display: block;
  }
  .root-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 80;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--px-border, #334155);
    background: var(--px-bg-card, #1e293b);
    color: var(--px-text-primary, #f8fafc);
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .root-burger:hover {
    border-color: var(--nav-accent, #64748b);
    background: var(--px-bg-elevated, #334155);
  }
  .root-content > .root-content-mount {
    padding-top: 60px;
  }
}