/* Shared locked-layout canvas and left-panel geometry */

body.page-reference,
body.page-text-mode,
body.page-home {
  /* Stable desktop canvas for narrow windows: pages scroll instead of rebuilding from startup size. */
  overflow: auto;
}

body.page-reference .reference-shell,
body.page-text-mode .reference-shell,
body.page-reference .site-footer,
body.page-text-mode .site-footer {
  min-width: var(--layout-lock-width, 100vw);
}

body.page-reference .reference-shell,
body.page-text-mode .reference-shell {
  width: max(100%, var(--layout-lock-width, 100vw));
  min-height: var(--layout-lock-height, 100vh);
}

body.page-home .landing-shell,
body.page-home .site-footer {
  min-width: var(--layout-lock-width, 100vw);
}

body.page-home .landing-shell {
  width: max(100%, var(--layout-lock-width, 100vw));
  min-height: var(--layout-lock-height, 100vh);
}

body.page-reference .reference-layout,
body.page-text-mode .reference-layout {
  width: var(--layout-lock-width, 100vw);
  min-width: var(--layout-lock-width, 100vw);
  min-height: var(--layout-lock-height, 100vh);
  grid-template-columns:
    var(--layout-lock-panel-width, var(--panel-width))
    minmax(
      0,
      calc(var(--layout-lock-width, 100vw) - var(--layout-lock-panel-width, var(--panel-width)))
    );
}

body.page-reference .mode-panel,
body.page-text-mode .mode-panel,
body.page-home .mode-panel {
  position: sticky;
  top: 0;
  align-self: start;
  width: var(--layout-lock-panel-width, var(--panel-width));
  min-width: var(--layout-lock-panel-width, var(--panel-width));
  height: var(--layout-lock-height, 100vh);
  min-height: var(--layout-lock-height, 100vh);
  padding: 20px 16px 28px 20px;
  gap: 18px;
  border-right: 1px solid rgba(34, 32, 28, 0.7);
  border-bottom: none;
  background:
    url("/assets/media/template-101/paper-left-menu.png") left 84px / 100% auto no-repeat,
    linear-gradient(180deg, #3a3a3a 0%, #303030 100%);
}

body.page-reference .mode-panel::after,
body.page-text-mode .mode-panel::after,
body.page-home .mode-panel::after {
  inset: 78px 10px 16px 10px;
}

body.page-reference .panel-brand,
body.page-text-mode .panel-brand,
body.page-home .panel-brand {
  padding-left: 10px;
}

body.page-reference .panel-brand img,
body.page-text-mode .panel-brand img,
body.page-home .panel-brand img {
  width: 76px;
  height: 76px;
}

body.page-reference .panel-brand-copy span,
body.page-text-mode .panel-brand-copy span,
body.page-home .panel-brand-copy span {
  font-size: 1.34rem;
}

body.page-reference .panel-brand-copy small,
body.page-text-mode .panel-brand-copy small,
body.page-home .panel-brand-copy small {
  display: block;
}

body.page-reference .panel-nav,
body.page-text-mode .panel-nav,
body.page-home .panel-nav {
  padding-top: 18px;
}

body.page-reference .panel-nav-header img,
body.page-text-mode .panel-nav-header img,
body.page-home .panel-nav-header img {
  width: 126px;
}

body.page-reference .panel-link,
body.page-text-mode .panel-link,
body.page-home .panel-link {
  padding: 12px 12px;
  font-size: 1.06rem;
}

body.page-reference .reference-main,
body.page-text-mode .reference-main {
  min-width: calc(
    var(--layout-lock-width, 100vw) - var(--layout-lock-panel-width, var(--panel-width))
  );
  min-height: var(--layout-lock-height, 100vh);
  padding: 26px 28px 38px;
}