/* Sheet backdrop */
.ws-sheet-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
  z-index: 50;
}
:root[data-mode="dark"] .ws-sheet-bg {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.ws-sheet-bg.on { display: block; }

@media (max-width: 880px) {
  /* PP4-WM880: 768-880 is the desktop shell (D-P18). Final 2.2 wordmark (.ws-hdr-brand /
     .ws-hdr-name) stays visible. .ws-mark is already display:none in shell.css (unused CO
     badge, not the lockup). Drawer leftovers stay for a later sweep; do not revive #wsNav. */
  .ws-menu-btn { display: inline-flex; }
  .ws-rail-btn { display: none; }
  .ws-tabs { flex-wrap: nowrap; }
  .ws-tab { width: 132px; max-width: 132px; min-width: 88px; font-size: 11.5px; flex: 0 0 auto; }
  .ws-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: min(300px, 88vw);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-overlay);
  }
  .ws-app.is-nav-open .ws-sidebar { transform: none; }

  .ws-main, .ws-main.is-canvas-open {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .ws-canvas {
    position: fixed;
    inset: 0;
    z-index: 70;
    border: none;
    border-radius: 0;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility .3s;
  }
  .ws-canvas[aria-hidden="false"] {
    transform: none;
    visibility: visible;
  }
}

@media (min-width: 881px) {
  .ws-app.is-rail-collapsed {
    --ws-rail-width: 0px;
  }
  .ws-app.is-rail-collapsed .ws-sidebar {
    min-width: 0;
    border-right: none;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-sidebar { transition: none; }
}

.ws-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}